Зачем нужна семантическая верстка?

Семантическая верстка и её значение

Семантическая верстка — это использование HTML-элементов, которые описывают смысл содержимого, а не только его внешний вид. Это критически важно для доступности, SEO и поддерживаемости кода.

Почему семантика важна

1. Доступность (a11y)

Экранные считыватели для людей с нарушениями зрения полагаются на семантику.

<!-- Плохо: экранный считыватель не поймёт структуру -->
<div onclick="handleClick()" class="button">Отправить</div>

<!-- Хорошо: семантичное, доступное решение -->
<button type="submit">Отправить</button>

При использовании кнопки экранный считыватель скажет пользователю: "кнопка Отправить", и человек сможет нажать её клавишей Enter.

2. SEO (поисковая оптимизация)

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

<!-- Плохо: поисковик не знает, что это заголовок -->
<div class="text-2xl font-bold">Основы JavaScript</div>

<!-- Хорошо: явная семантика -->
<h1>Основы JavaScript</h1>

Правильная структура заголовков (h1, h2, h3) помогает рангированию в поисковых системах.

3. Чистота кода и поддерживаемость

Семантический HTML легче читать и понимать.

<!-- Плохо: множество div'ов -->
<div class="container">
  <div class="section">
    <div class="article">
      <div class="text">Статья</div>
    </div>
  </div>
</div>

<!-- Хорошо: ясная структура -->
<main>
  <article>
    <header>
      <h1>Статья</h1>
    </header>
    <section>
      <p>Содержимое</p>
    </section>
  </article>
</main>

Основные семантические элементы

Структурные элементы:

• header — заголовок страницы
• nav — навигация
• main — основное содержимое
• article — статья
• section — раздел
• aside — боковой контент
• footer — подвал

Текстовые элементы:

• h1-h6 — заголовки
• p — параграф
• strong — важный текст
• em — акцентированный текст
• figure — иллюстрация

Пример хорошей разметки

<header>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/blog">Блог</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Как начать с JavaScript</h1>
    <section>
      <h2>Введение</h2>
      <p>JavaScript — язык программирования...</p>
    </section>
  </article>
</main>

Практическое применение в React

export function BlogPost({ title, content }) {
  return (
    <article>
      <header>
        <h1>{title}</h1>
      </header>
      <section>{content}</section>
    </article>
  );
}

Семантическая верстка — это инвестиция в доступность, видимость в поисковых системах и долгосрочную поддерживаемость проекта.