Семантическая вёрстка: какие теги использовать и зачем

Что такое семантическая вёрстка

Семантическая вёрстка — это когда тег описывает, чем является фрагмент, а не как он выглядит. Шапка — это <header>, меню — <nav>, кнопка — <button>. Внешний вид задаёт CSS, а HTML отвечает за смысл.

Если всё сделано на <div> и <span>, браузер видит страницу как набор безымянных коробок. Человек с хорошим зрением этого не заметит, но скринридер, поисковый робот и следующий разработчик — заметят.

Основные теги и когда их применять

Простое правило: ссылка ведёт куда-то, кнопка что-то делает.

До и после

Вёрстка «на дивах»:

<div class="header">
  <div class="logo">Shop</div>
  <div class="menu">
    <div onclick="go('/catalog')">Каталог</div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="title">Новинки осени</div>
    <div class="btn" onclick="like()">Нравится</div>
  </div>
</div>

Та же страница семантически:

<header>
  <a href="/">Shop</a>
  <nav>
    <a href="/catalog">Каталог</a>
  </nav>
</header>
<main>
  <article>
    <h2>Новинки осени</h2>
    <button type="button" onclick="like()">Нравится</button>
  </article>
</main>

Кода почти столько же, а смысла — намного больше.

Почему button лучше div

<div onclick> выглядит как кнопка, но ей не является. Чтобы он вёл себя как настоящая кнопка, придётся вручную добавить:

• tabindex="0", чтобы до него можно было дойти клавишей Tab;
• обработку Enter и пробела;
• role="button", чтобы скринридер объявил его кнопкой;
• стили фокуса и состояние disabled.

<button> даёт всё это бесплатно. То же с <a href>: настоящая ссылка открывается в новой вкладке, копируется и индексируется, а div с переходом через JavaScript — нет.

Что даёт семантика на практике

• Доступность. Скринридеры строят по тегам карту страницы: пользователь может перейти сразу к main или к навигации, пролистать заголовки.
• Поддержка кода. <nav> и <article> читаются быстрее, чем div.wrapper-2. Новому разработчику легче разобраться.
• Разбор страницы. Поисковые системы, режим чтения в браузере и другие парсеры опираются на структуру, чтобы найти основной контент.
• Меньше JavaScript. Нативные элементы уже умеют фокус, клавиатуру и отправку форм.

Частые ошибки

• Несколько <main> на одной странице. Видимый main должен быть один.
• <section> вместо обёртки. Если у блока нет своего заголовка и он нужен только для стилей, используйте <div>.
• Заголовки ради размера. <h3> выбирают по уровню вложенности, а не потому что он мельче. Размер задаётся в CSS.
• Кнопка внутри ссылки или ссылка без href. Это ломает клавиатурную навигацию.
• Забытый type у кнопки в форме. По умолчанию <button> внутри <form> отправляет её.

Как проверить свою вёрстку

1. Отключите CSS и посмотрите, понятна ли структура страницы.
2. Пройдите страницу только клавиатурой: Tab, Enter, пробел.
3. Откройте панель доступности в DevTools браузера и проверьте роли элементов.
4. Сверьтесь со справочником элементов в MDN.