Хорошо или плохо верстать на Div

Хорошо или плохо верстать на Div

Этот вопрос касается семантической вёрстки и HTML best practices. Прямой ответ: верстать только на div — это плохо. Но давайте разберёмся, почему.

Проблемы вёрстки на одних div

1. Потеря доступности (Accessibility)

Использование только div игнорирует семантику HTML и создаёт проблемы для пользователей с ограничениями:

<!-- ПЛОХО — div везде, потеряна семантика -->
<div class="page">
  <div class="header">
    <div class="nav">
      <div class="link">Home</div>
      <div class="link">About</div>
    </div>
  </div>
  <div class="article">
    <div class="title">My Article</div>
    <div class="content">...</div>
  </div>
</div>

<!-- ХОРОШО — используем семантические теги -->
<main>
  <header>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
  <article>
    <h1>My Article</h1>
    <p>...</p>
  </article>
</main>

При использовании только div:

• Screen readers не понимают структуру документа
• Пользователи с клавиатурой не могут навигировать
• Поисковые системы хуже индексируют контент

2. SEO (Search Engine Optimization)

Поисковые системы используют HTML теги для понимания содержимого:

<!-- Плохо для SEO -->
<div class="heading">Latest News</div>
<div class="article">
  <div class="article-title">Breaking News</div>
  <div class="article-body">Lorem ipsum...</div>
</div>

<!-- Хорошо для SEO -->
<h1>Latest News</h1>
<article>
  <h2>Breaking News</h2>
  <p>Lorem ipsum...</p>
</article>

Гугл лучше ранжирует сайты, которые используют правильную семантику.

3. Читаемость кода

Код с правильной семантикой легче читать и понимать:

<!-- Трудно понять структуру -->
<div class="wrapper">
  <div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
  <div class="flex-container side">
    <div class="text">Sidebar</div>
  </div>
</div>

<!-- Ясная структура -->
<main>
  <section>
    <article>Item 1</article>
    <article>Item 2</article>
  </section>
  <aside>
    <p>Sidebar</p>
  </aside>
</main>

Когда div уместен

Div — это правильный выбор для:

<!-- Обёртка для layout/styling -->
<div className="flex items-center gap-4">
  <input type="text" />
  <button>Search</button>
</div>

<!-- Контейнер для components -->
<div className="card">
  <h2>Card Title</h2>
  <p>Card content</p>
</div>

<!-- Вспомогательные элементы без семантики -->
<div className="spacer"></div>
<div className="decoration"></div>

Семантические HTML теги

Исползуй эти теги вместо div:

<!-- Структура документа -->
<header>    <!-- Заголовок страницы или секции -->
<nav>       <!-- Навигация -->
<main>      <!-- Основной контент -->
<article>   <!-- Независимый контент (пост, новость, статья) -->
<section>   <!-- Логическая секция контента -->
<aside>     <!-- Побочное содержимое (sidebar) -->
<footer>    <!-- Подвал страницы или секции -->

<!-- Текстовые элементы -->
<h1>-<h6>  <!-- Заголовки (используй правильный уровень!) -->
<p>        <!-- Параграфы -->
<strong>   <!-- Важный текст -->
<em>       <!-- Подчёркнутый/наклонный текст -->
<mark>     <!-- Выделенный текст -->

<!-- Списки -->
<ul>       <!-- Неупорядоченный список -->
<ol>       <!-- Упорядоченный список -->
<li>       <!-- Элемент списка -->
<dl>       <!-- Список определений -->

<!-- Интерактивные элементы -->
<button>   <!-- Кнопка -->
<a>        <!-- Ссылка -->
<form>     <!-- Форма -->
<input>    <!-- Поле ввода -->
<label>    <!-- Метка для input -->

Пример правильной вёрстки

<!-- ПЛОХО -->
<div class="header">
  <div class="container">
    <div class="logo">MyApp</div>
    <div class="nav">
      <div class="nav-item"><span>Home</span></div>
      <div class="nav-item"><span>About</span></div>
      <div class="nav-item"><span>Contact</span></div>
    </div>
  </div>
</div>

<!-- ХОРОШО -->
<header>
  <div className="container"> {/* div OK для layout --}
    <a href="/" className="logo">MyApp</a>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </div>
</header>

Accessibility (a11y) примеры

<!-- ПЛОХО -- div не имеет встроенной роли -->
<div className="button" onClick={handleClick}>
  Submit
</div>

<!-- ХОРОШО -- button имеет встроенную доступность -->
<button onClick={handleClick}>
  Submit
</button>

<!-- ПЛОХО -- div без роли не имеет значения -->
<div>
  <div className="checkbox" />
  <div className="label">I agree</div>
</div>

<!-- ХОРОШО -- input типа checkbox с label -->
<input type="checkbox" id="agree" />
<label htmlFor="agree">I agree</label>

В React/Next.js

// ПЛОХО
function Article() {
  return (
    <div>
      <div className="title">My Article</div>
      <div className="content">Text...</div>
    </div>
  );
}

// ХОРОШО
function Article() {
  return (
    <article>
      <h1>My Article</h1>
      <p>Text...</p>
    </article>
  );
}

// ПЛОХО -- не использует элемент form
function LoginForm() {
  return (
    <div onKeyDown={handleKeyDown}>
      <input type="email" />
      <input type="password" />
      <div onClick={handleSubmit}>Login</div>
    </div>
  );
}

// ХОРОШО -- form обрабатывает Enter автоматически
function LoginForm() {
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" />
      <input type="password" />
      <button type="submit">Login</button>
    </form>
  );
}

Практическое правило

Прежде чем использовать <div>, спроси себя:

1. Это структурный элемент? → Используй <header>, <section>, <article> и т.д.
2. Это навигация? → Используй <nav>
3. Это список? → Используй <ul>/<ol>/<li>
4. Это кнопка или ссылка? → Используй <button>/<a>
5. Это форма? → Используй <form>
6. Это просто обёртка для CSS? → OK, используй <div>

Заключение

Верстать только на div — это плохая практика, которая:

• Ломает доступность для людей с ограничениями
• Ухудшает SEO
• Усложняет код
• Игнорирует встроенные возможности HTML

Модерный HTML предоставляет богатый набор семантических тегов. Используй их! Это не просто лучше для пользователей и машин — это также делает твой код более понятным и легко поддерживаемым.