Семантическая вёрстка: теги, важные для поиска и доступности

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

Семантическая вёрстка использует элементы HTML по их прямому назначению: заголовок — как заголовок, список — как список, навигацию — как навигацию. В отличие от «вёрстки на контейнерах», где всё оформлено безликими блоками и классами, такая страница сама рассказывает о своём устройстве. Это помогает поисковым роботам понимать структуру, а пользователям программ экранного доступа — перемещаться по страницам, ведь они опираются именно на смысловую разметку. Магического влияния на позиции семантика не даёт, но убирает лишние препятствия и повышает качество страницы.

Основные теги

Каркас страницы

<body>
  <header>...</header>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p><time datetime='2026-09-23'>23 сентября 2026</time></p>
      <section>
        <h2>Первый раздел</h2>
        <p>Текст.</p>
      </section>
    </article>
    <aside>Похожие материалы</aside>
  </main>
  <footer>...</footer>
</body>

Каркас показывает главное: у страницы есть шапка, одно основное содержимое, статья с заголовком и датой, дополнительный блок и подвал. Даже без оформления структура понятна.

Правила, которые часто нарушают

1. Один H1 и логичная иерархия. Уровни не пропускаются: иерархия заголовков.
2. Ссылка — для перехода, кнопка — для действия. Элемент a ведёт на другой адрес, button выполняет действие на странице. Ссылка без адреса или кнопка, заменяющая ссылку, ломают навигацию и работу роботов.
3. Списки — тегами списков. Пункты меню, шаги и перечисления размечайте как списки, а не как строки с переносами: таблицы и списки.
4. Таблицы — для данных, а не для вёрстки. У таблицы есть заголовки столбцов и подпись.
5. Изображения имеют описание. Содержательным картинкам нужен альтернативный текст: изображения в статьях.
6. Язык страницы указан в атрибуте lang корневого элемента.

Связь с доступностью

Программы экранного доступа позволяют переходить между заголовками, списками и разделами и сразу находить основное содержимое. Если вся страница состоит из блоков без смысла, такая навигация невозможна. Проверьте страницу, перемещаясь только клавиатурой: порядок переходов должен быть логичным, а нажимаемые элементы — видимо выделяться при фокусе. Доступный сайт удобнее и всем остальным: юзабилити сайта.

Семантика и скрипты

Когда содержимое формируется скриптами, семантика тоже должна быть в итоговой разметке: если робот получает пустой контейнер, а заголовки и ссылки появляются позже, часть информации может не попасть в индекс. Выводите важное содержимое на сервере: индексация страниц, созданных JavaScript. Не заменяйте настоящие элементы скриптовыми имитациями: кнопка из блока с обработчиком нажатия недоступна с клавиатуры и непонятна роботу.

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

• Отключите оформление: страница должна читаться как связный документ с заголовками и списками.
• Посмотрите структуру заголовков расширением браузера или краулером: если по ней понятно содержание, иерархия верная.
• Пройдите по странице клавишей Tab: фокус должен переходить по нужным элементам по порядку.
• Проверьте разметку валидатором и исправьте ошибки вложенности.

Частые вопросы