Семантическая вёрстка: теги, примеры разметки и разбор ошибок

Семантическая вёрстка: теги, примеры разметки и разбор ошибок

Тег выбирается по смысловому предназначению фрагмента, а не по внешнему виду на макете. Из тегов складывается логическая структура документа, которую способны понимать браузер, программа чтения с экрана и поисковый робот Google. Разница видна на простом сравнении: <div class="header"> сообщает браузеру только то, что внутри лежит какой-то контейнер с классом, а тег <header> прямо говорит — это шапка страницы или раздела. Вот что такое семантическая разметка на практике: набор тегов, каждый из которых несёт значение, а не только оформление через CSS. Хорошая разметка должна оставаться понятной и через год после релиза, когда её открывает другой разработчик.

Семантическая вёрстка строится на правиле «тег — роль»: section для тематического раздела, article для самостоятельного материала, div span для случаев, где смысла нет и нужна только обёртка под стили или скрипт. В статье разберём, зачем нужна семантика, какие теги HTML5 использовать, как собрать скелет страницы из семантического элемента и нескольких дочерних тегов, как выбирать между section, article или div, какие ошибки встречаются чаще всего и как за 15–20 минут проверить готовую разметку инструментами разработчика. Этот материал будет полезен и тем, кто проходит курс по вёрстке, и тем, кто уже занимается SEO-оптимизацией сайта.

Зачем нужна семантика: поисковые системы, доступность и поддержка кода

Зачем нужна семантика, если браузер отрисует страницу и с одними div? Дело в трёх группах выгод, и первая касается поисковых систем, включая Google и российские поисковики. Поисковый робот разбирает HTML-документ не как картинку, а как структуру: по тегам header, nav, main он отличает основной контент от навигации и служебных блоков. Это помогает алгоритму корректнее собрать сниппет в поисковой выдаче и выделить заголовок страницы — но это не обещание роста ранжирования, а вопрос корректного распознавания информации поисковиком.

Вторая группа выгод — доступность для людей с ограниченными возможностями. По данным ВОЗ, около 15% населения планеты живёт с той или иной формой инвалидности, и часть этой аудитории использует сайты через скринридер — программу озвучивания текста. Доступный интерфейс должен быть частью базовой вёрстки, а не отдельной доработкой перед сдачей проекта. Секционные теги дают такому пользователю навигационные ориентиры: можно сразу перейти к основному содержимому, минуя шапку и меню, экономя до нескольких десятков секунд на каждой странице. Сюда же относится атрибут alt у изображений, lang у документа и связка label с полем формы — без них скринридер не поймёт, что за элемент перед пользователем.

Третья группа — поддержка кода. Разработчик, который открывает чужую разметку через полгода, по тегам сразу видит назначение фрагментов: шапка, список статей, подвал с контактами выделяются без комментариев в коде. Div-суп такой информации не даёт, и на разбор структуры страницы без семантики уходит в 2–3 раза больше времени, чем на страницу с header, main и footer.

По запросу «семантическая верстка» сервис разобрал 17 страниц выдачи Яндекса и Google, увидел у конкурентов 7 разделов и медиану объёма 1480 слов, собрал техническое задание и сам написал текст на 1521 слово с релевантностью 98 пунктов — включая объяснение разницы между section, article и div, разбор типичных ошибок и сравнение с микроразметкой schema.org. Человеку остаётся вставить примеры кода под свой проект, проверить актуальность тегов HTML5 и опубликовать статью.

Основные семантические теги HTML5 и их назначение

Спецификация HTML Living Standard (WHATWG) и рекомендации W3C описывают около десятка семантических тегов, которые заменили div-набор из вёрстки нулевых. Ниже — теги header main footer и их ближайшие соседи с назначением и ограничением по использованию.

Теги header main footer задают три крупных региона документа, а связка header footer дополняется тегами уровня контента. Тег должен быть выбран по роли элемента, а не по внешнему виду на макете. Заголовки h1–h6 идут без пропуска уровней: после h2 не ставят сразу h4. Абзацы оформляют тегом p, списки — ul или ol с элементами li, причём каждый li должен содержать законченную мысль. Иллюстрацию с подписью объединяет figure с figcaption внутри. Цитату оформляет blockquote, дату и время — тег time с атрибутом datetime, например <time datetime="2024-05-10">10 мая 2024</time>. Табличные данные размечают тегом table с обязательным thead и заголовочными ячейками th: <th scope="col">Название</th>. Использование этого тега вместо div для табличных данных сразу увеличивает доступность страницы для скринридера.

Из перечня семантических тегов чаще всего в макете из десяти элементов встречаются header, nav, main, article, section и footer — на них приходится до 70% разметки крупных регионов, остальное занимают div и оформительские обёртки.

Скелет страницы: пример семантической разметки

Используйте семантические теги для крупных регионов страницы в первую очередь, а мелкие обёртки оставьте на div. Ниже — пример структуры документа: header с nav, main с article внутри и footer с address.

<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/blog">Блог</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Семантическая вёрстка</h1>
    <article>
      <header>
        <h2>Заголовок статьи</h2>
        <time datetime="2024-05-10">10 мая 2024</time>
      </header>
      <section>
        <h3>Первая часть</h3>
        <p>Текст раздела с основным содержимым.</p>
        <figure>
          <img src="scheme.png" alt="Схема тегов HTML5">
          <figcaption>Схема вложенности тегов</figcaption>
        </figure>
      </section>
    </article>
    <aside>
      <h3>Похожие статьи</h3>
    </aside>
  </main>
  <footer>
    <address>Контакты редакции</address>
  </footer>
</body>

Порядок создания такой разметки одинаков для любой страницы и укладывается в четыре шага. Шаг первый: расставляют крупные блоки header main footer. Шаг второй: внутри main выстраивают иерархию заголовков от h1 к h2 и h3. Шаг третий: каждый смысловой фрагмент оборачивают тегом section или article, если у него есть заголовок или он самодостаточен. Шаг четвёртый: добавляют оформительские обёртки div для сетки колонок и работы скриптов. На простой странице из одной статьи весь код умещается в 30–40 строк HTML, и каждый уровень вложенности проверяется отдельно, чтобы структура осталась читаемой. Код должен читаться на любом уровне вложенности, иначе значение тегов теряется при доработке. Пример подходит и для лендинга, и для карточки товара — меняется только количество article и section внутри main.

Section, article или div: как выбрать тег

• Содержимое можно вырвать из страницы и вставить в RSS-ленту целиком, оно сохранит смысл? Тогда нужен article — пост, карточка товара, отдельный комментарий.
• Фрагмент — часть общей темы страницы, и у него есть собственный заголовок? Значит, подходит section, а не произвольный div.
• Контент связан с основным материалом, но необязателен для понимания сути? Это aside: список похожих статей, врезка с определением термина, любой второстепенный фрагмент.
• Элемент нужен только для сетки колонок, отступов или как крючок для JS-скрипта? Тогда div остаётся правильным выбором, и заменять этот тег на section или article не нужно.
• Нужно выделить стилем часть текста внутри строки без смыслового значения — подойдёт span, например, чтобы покрасить одно слово в предложении.

На практике из всех тегов, которые могут встретиться в макете, section и article занимают около трети, остальное — div и инлайновые элементы вроде span. Простое правило: если для фрагмента нельзя честно придумать заголовок, который не будет пустой формальностью, — перед вами div, а не section. Использовать теги нужно там, где они добавляют смысл, а не там, где просто можно поставить любой из них по привычке. Признак семантического элемента — наличие роли; фрагмент без чёткой роли лучше оставить на div, переусложнять разметку section и article ради формы не стоит. Выбор тега должен быть осознанным, а не случайным: какой тег подойдёт в спорном случае, определяет не внешний вид, а то, может ли содержимое существовать как самостоятельная единица.

Типичные ошибки семантической вёрстки

• Div-суп: вся страница собрана на div class="header", div class="nav", div class="footer". Скринридер и поисковый робот видят набор безликих блоков без структуры. Решение — заменить обёртки на header main footer и article section, где это оправдано смыслом.
• Заголовки подбирают по размеру шрифта, а не по уровню вложенности, из-за чего h2 идёт сразу за h4. Читателю и роботу сложно понять иерархию текста, а пропуск двух уровней уже ломает логическую структуру документа. Правильно — присваивать уровень по месту в структуре, а размер регулировать через CSS.
• На странице несколько тегов h1: и в шапке, и в каждой карточке блога. Такой h1 перестаёт быть уникальным заголовком документа. Один h1 должен оставаться главным заголовком страницы, остальные — h2 и ниже.
• Section без собственного заголовка: тег стоит, а h2 внутри нет. Это делает его равнозначным div. Лучше добавить заголовок или использовать только div, если раздел действительно безымянный.
• Тег nav оборачивает каждую отдельную ссылку в тексте статьи. Nav предназначен для навигационных фрагментов целиком, а не для одной строки со ссылкой на источник.
• Table используют для сетки макета вместо CSS Grid или Flexbox. Такая таблица ломает доступность и мешает скринридеру, который ждёт от table табличные данные, а не колонки дизайна.
• Теги b и i применяют вместо strong и em. Внешне текст выглядит одинаково жирным или курсивным, но strong и em несут смысловое ударение, которое учитывает программа озвучивания текста, а b и i — только начертание.

Отдельное заблуждение: «расставил теги — позиции выросли за неделю». Семантическая вёрстка сама по себе не может двигать сайт в выдаче Google или другого поисковика, она лишь помогает поисковому роботу и человеку правильно прочитать текст и структуру документа. В аудитах таких страниц обычно фиксируют 5–7 ошибок из списка выше на один типовой лендинг, и большинство исправлений занимает не больше часа работы. Проблему нужно исправлять сразу после обнаружения, иначе накапливается технический долг в коде.

Семантическая вёрстка и микроразметка schema.org: в чём разница

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

Одно не заменяет другое: можно собрать вёрстку на section article header без единой строчки schema.org, и наоборот — добавить микроразметку поверх div-супа. Оба слоя должны быть согласованы между собой: теги дают структуру и доступность, JSON-LD — расширенное описание сущностей поисковым системам. Такая связка не всегда обязательна, но часто оказывается полезной: страница с обоими слоями может получать в среднем на 10–20% больше кликов в выдаче за счёт расширенных сниппетов, хотя точная цифра зависит от тематики и от того, как её ранжирует конкретный поисковик.

Как проверить семантику страницы: инструменты и чек-лист

Проверку начинают с валидатора W3C — он находит незакрытые теги и неверную вложенность за 1–2 минуты. Вкладка Accessibility в DevTools браузера показывает дерево доступности так, как его воспринимает скринридер. Расширения WAVE и axe DevTools подсвечивают на вашей странице элементы без alt, пропущенные уровни заголовков и отсутствие label у полей формы. Аудит Lighthouse от Google показывает свой раздел Accessibility с баллом от 0 до 100 и списком конкретных замечаний.

• на странице есть только один h1;
• уровни заголовков идут без пропусков;
• main используется один раз;
• навигация обёрнута в nav, а не в произвольный div;
• у каждого section есть заголовок;
• у изображений заполнен атрибут alt;
• контакты вынесены в address внутри footer;
• div применяется только для оформления и сетки;
• оценка Lighthouse Accessibility выше 90 баллов из 100.

Для полноценной проверки достаточно 15–20 минут: используйте семантические теги в разметке заранее, тогда основное содержание пройдёт валидацию без правок, а с помощью бесплатного инструмента можно быстро найти оставшиеся недочёты. Результат проверки должен быть задокументирован — это экономит время при следующем аудите вашей страницы.

Частые вопросы о семантической вёрстке

Автор: Аркадий Зверев, генеральный директор агентства «Комета». В продвижении сайтов с 2008 года, более 300 проектов. Дата обновления: 22 июня 2026.