Семантические теги HTML: как разметить структуру страницы

Семантический HTML описывает назначение содержимого, а не его внешний вид. Браузер, поисковый робот, скринридер и другой разработчик должны понимать: здесь основная навигация, здесь самостоятельная статья, а здесь дополнительный материал. Цвет, размер и расположение этих блоков по-прежнему задаёт CSS.

Семантика начинается не с замены каждого <div> на новый тег, а с вопроса: какую роль выполняет этот фрагмент документа? Если подходящего элемента нет, нейтральный <div> остаётся правильным выбором.

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

Правильно выбранные элементы дают несколько преимуществ:

• структура кода становится понятнее без дополнительных комментариев;
• скринридеры могут использовать ориентиры страницы и заголовки для навигации;
• браузеры и поисковые системы точнее распознают назначение содержимого;
• стили и JavaScript проще привязать к устойчивой структуре документа.

Семантический тег сам по себе не гарантирует высокую позицию в поиске и не исправляет плохой текст. Это основа качественного документа, а не SEO-трюк.

Основные структурные элементы

<header>

Вводная часть страницы или отдельного раздела. В шапке сайта обычно находятся логотип, название и навигация. Внутри статьи <header> может содержать заголовок, дату и краткое описание. На странице может быть несколько элементов <header>.

<nav>

Крупный блок навигационных ссылок: основное меню, оглавление или пагинация. Не нужно оборачивать в <nav> каждую группу из двух ссылок. Если навигационных областей несколько, дайте им различимые названия через aria-label или aria-labelledby.

<main>

Основное уникальное содержимое страницы. Обычно в видимом документе должен быть один <main>. Повторяющиеся шапка, боковая навигация и подвал в него не входят.

<article>

Самостоятельный материал, который сохраняет смысл отдельно от страницы: статья, новость, карточка публикации или сообщение форума. Вложенные <article> допустимы, например комментарии внутри статьи, если каждый из них является самостоятельной единицей.

<section>

Тематический раздел документа. У секции, как правило, есть заголовок. Если обёртка нужна только для сетки или фона и отдельной темы у неё нет, используйте <div>.

<aside>

Содержимое, косвенно связанное с окружающим материалом: ссылки по теме, словарь терминов или справка об авторе. Если убрать <aside>, основная мысль должна сохраниться.

<footer>

Завершающая информация страницы или раздела: сведения об авторе, дата обновления, юридические ссылки. Как и <header>, этот элемент можно использовать несколько раз в разных контекстах.

Пример структуры страницы

<!doctype html><html lang="ru"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Как ухаживать за комнатными растениями</title></head><body>  <header>    <a href="/" aria-label="На главную">Зелёный дом</a>    <nav aria-label="Основная навигация">      <ul>        <li><a href="/plants">Растения</a></li>        <li><a href="/guides">Руководства</a></li>      </ul>    </nav>  </header>​  <main>    <article>      <header>        <h1>Как ухаживать за комнатными растениями</h1>        <p>Памятка о поливе, свете и пересадке.</p>      </header>​      <section>        <h2>Выберите подходящее освещение</h2>        <p>Учитывайте вид растения и ориентацию окна.</p>      </section>​      <aside aria-labelledby="related-title">        <h2 id="related-title">Материалы по теме</h2>        <ul>          <li><a href="/guides/watering">Как настроить полив</a></li>        </ul>      </aside>​      <footer>        <p>Материал обновлён <time datetime="2026-08-19">19 августа 2026 года</time>.</p>      </footer>    </article>  </main>​  <footer>    <nav aria-label="Служебная навигация">      <a href="/privacy">Политика конфиденциальности</a>      <a href="/contacts">Контакты</a>    </nav>  </footer></body></html>​

Элементы можно вкладывать друг в друга, если это соответствует их смыслу и правилам HTML. Здесь <article> — самостоятельная публикация, <section> — один из её тематических разделов, а <aside> — необязательное дополнение.

Когда нужен <div>

<div> не является плохим или устаревшим тегом. Он нужен, когда у контейнера нет собственной смысловой роли. Например, дополнительная обёртка для CSS Grid может выглядеть так:

<div class="article-layout">  <article>...</article>  <div class="article-layout__controls">...</div></div>​

Не выбирайте <section> только ради отступа или фонового цвета. Сначала определите смысл, затем элемент и только после этого — класс для оформления.

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

1. Все контейнеры заменены на <section>. Секция обозначает отдельную тему, а не универсальную обёртку.
2. На странице несколько видимых <main>. Основная область должна быть однозначной.
3. У секций нет заголовков. Это часто означает, что выбран не тот элемент или структура текста не продумана.
4. Элемент выбирают по стандартному виду. Заголовок остаётся заголовком даже после уменьшения шрифта в CSS.
5. Навигационные области неразличимы. Нескольким <nav> нужны понятные доступные названия.
6. Семантика дублируется ARIA-ролями. Обычно не нужно писать <nav role="navigation">: нативный элемент уже передаёт эту роль.

Короткий алгоритм выбора элемента

Перед добавлением контейнера задайте вопросы:

1. Это основное содержимое страницы? Используйте <main>.
2. Фрагмент можно распространять отдельно? Возможно, это <article>.
3. Это тематическая часть с заголовком? Рассмотрите <section>.
4. Содержимое лишь дополняет основное? Подойдёт <aside>.
5. Это крупная навигация? Используйте <nav>.
6. Роль только визуальная или техническая? Оставьте <div>.

После разметки отключите CSS и посмотрите на документ. Если порядок, заголовки и назначение блоков остаются понятными, семантическая основа, скорее всего, выбрана удачно.

Что запомнить

Семантический HTML — это точное описание содержимого. Используйте нативный элемент, когда он передаёт нужный смысл, не бойтесь нейтральных контейнеров и проверяйте структуру по заголовкам и ориентирам страницы. Такой подход помогает доступности, поддержке кода и качеству документа одновременно.

report Сообщить об ошибке в статье