Техническое SEO

Семантические теги HTML5: полное руководство с примерами

22.05.202618 мин чтенияПавел Борушко
Семантические теги HTML5 — руководство с примерами для SEO
html5семантическая-разметкатехническое-seoдоступностьструктура-страницы

Семантические теги HTML5 — это фундамент правильной разметки страницы: они объясняют браузеру, поисковику и скринридеру, что находится на странице, не требуя CSS-классов или комментариев. Разбираем все ключевые теги, показываем правильную вложенность, типичные ошибки и реальное влияние семантики на SEO и доступность.

До HTML5 веб состоял из div и span с CSS-классами вроде .header, .sidebar, .footer. Поисковые роботы и скринридеры вынуждены были угадывать, что есть что. HTML5 ввёл семантические теги — элементы, несущие смысл сами по себе, независимо от CSS. Тег <article> означает самостоятельный материал. Тег <nav> — навигация. Тег <aside> — дополнительный контент, связанный с основным, но необязательный для понимания.

Семантика ≠ стилизация. Семантический тег описывает роль элемента в документе, а не его внешний вид. Внешний вид задаётся CSS. <section> и <div> визуально неотличимы без стилей — разница только в том, что браузер и поисковик знают о <section> то, чего не знают о <div>.

Структурные теги страницы

HTML5 ввёл набор тегов для разметки крупных регионов страницы. Они формируют скелет документа, который браузер, поисковик и вспомогательная технология могут обойти без чтения CSS.

Визуальная схема семантической структуры HTML5-страницы.
<header>
Вводная часть ближайшего секционного контекста — страницы или раздела. На уровне страницы — шапка с логотипом, навигацией, поиском. Внутри <article> — заголовок, метаданные, автор. Может быть несколько <header> на странице, если они в разных секциях.
<nav>
Блок навигационных ссылок. Не каждый набор ссылок — <nav>. Только основные навигационные маршруты: главное меню, хлебные крошки, пагинация. Ссылки в подвале на политику конфиденциальности — не <nav>. Скринридеры используют <nav> для быстрого перехода к навигации.
<main>
Уникальный основной контент страницы. Только один <main> на документ. Содержимое <main> не должно повторяться на других страницах сайта (шапка, подвал, боковая панель — повторяются, поэтому они вне <main>). Скринридеры прыгают прямо к <main> по горячей клавише.
<footer>
Подвал ближайшего секционного контекста. На уровне страницы — контакты, копирайт, ссылки. Внутри <article> — информация об авторе, теги, дата обновления. Как и <header>, может присутствовать в нескольких секциях.
<article>
Самостоятельный, независимо распространяемый материал: статья блога, новость, пост форума, карточка товара, комментарий. Ключевой тест: если вырвать <article> из контекста и опубликовать отдельно — он будет иметь смысл? Если да — это <article>.
<section>
Тематически однородный раздел документа, у которого нет более специфичного тега. Всегда должна иметь заголовок (<h2>–<h6>). Если заголовка нет — скорее всего нужен <div>. Не используйте <section> как замену <div> для стилизации.
<aside>
Контент, косвенно связанный с основным: врезки, боковые панели, рекламные блоки, биографии авторов, связанные материалы. Внутри <article> — примечание, цитата, не критичная для понимания основного текста. На уровне страницы — боковая колонка.

Базовый скелет любой страницы выглядит так — и это уже семантически корректная разметка:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Название страницы</title>
</head>
<body>

  <header>
    <a href="/"><img src="logo.svg" alt="Название компании"></a>
    <nav aria-label="Основная навигация">
      <ul>
        <li><a href="/blog">Блог</a></li>
        <li><a href="/services">Услуги</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Уникальный контент страницы -->
  </main>

  <footer>
    <p>&copy; 2026 Название компании</p>
    <nav aria-label="Вспомогательная навигация">
      <a href="/privacy">Конфиденциальность</a>
      <a href="/sitemap">Карта сайта</a>
    </nav>
  </footer>

</body>
</html>

Теги для контента: article, section, h1–h6, p

Теги структурного уровня задают регионы страницы. Теги уровня контента описывают природу самого содержимого. Разберём комбинацию, которая встречается на каждой странице блога.

HTML
<!-- Страница статьи блога -->
<main>

  <article>
    <header>
      <h1>Как выбрать правильный тег HTML</h1>
      <p>Опубликовано: <time datetime="2026-05-22">22 мая 2026</time></p>
      <address>
        Автор: <a rel="author" href="/authors/pavlo">Павел Борушко</a>
      </address>
    </header>

    <section>
      <h2>Почему семантика важна</h2>
      <p>Текст раздела...</p>
    </section>

    <section>
      <h2>Основные теги</h2>
      <p>Текст раздела...</p>

      <aside>
        <p>Примечание: спецификация HTML Living Standard обновляется постоянно.</p>
      </aside>
    </section>

    <footer>
      <p>Теги: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
    </footer>
  </article>

  <!-- Связанные статьи -->
  <aside aria-label="Связанные материалы">
    <h2>Читать также</h2>
    <ul>
      <li><a href="/blog/heading-structure">Структура заголовков</a></li>
      <li><a href="/blog/schema-org-json-ld">Schema.org разметка</a></li>
    </ul>
  </aside>

</main>
Обратите внимание: <header> и <footer> внутри <article> — это не то же самое, что <header> и <footer> страницы. Это отдельные секционные контексты. Поисковые роботы понимают это различие и правильно атрибутируют заголовок, дату и автора к конкретной статье, а не к сайту в целом.

Когда section, а когда div

Правило простое: если у блока есть смысловое имя — это <section>. Если блок нужен только для стилизации или JavaScript-хука — это <div>.

HTML
<!-- ПРАВИЛЬНО: section с заголовком -->
<section>
  <h2>Преимущества продукта</h2>
  <ul>
    <li>Быстрая доставка</li>
    <li>Гарантия 2 года</li>
  </ul>
</section>

<!-- ПРАВИЛЬНО: div для стилизации -->
<div class="cards-grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

<!-- НЕПРАВИЛЬНО: section без заголовка -->
<section class="cards-grid">
  <article>...</article>
</section>

<!-- НЕПРАВИЛЬНО: div там, где есть смысл -->
<div id="about">
  <!-- Раздел «О компании» — нужен <section> -->
  <h2>О компании</h2>
  <p>...</p>
</div>

Медиа, данные и утилитарные теги

HTML5 добавил теги для конкретных типов данных — они дают поисковикам дополнительные сигналы без Schema.org разметки.

<figure> и <figcaption>

Самостоятельный медиа-контент с подписью. Изображения, диаграммы, таблицы, фрагменты кода — всё, что связано с основным текстом, но может быть перемещено или вынесено в приложение без потери смысла. <figcaption> — официальная подпись к <figure>. Google использует <figcaption> как альтернативное описание изображения при анализе изображений.

<time>

Машиночитаемая дата или время. Атрибут datetime в формате ISO 8601 позволяет поисковику точно определить дату публикации или события независимо от отображаемого формата. Google явно рекомендует использовать <time> для дат статей при разметке типа Article.

<address>

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

<details> и <summary>

Нативный раскрывающийся виджет без JavaScript. <summary> — видимый заголовок. <details> — скрытое содержимое. Браузер обрабатывает open/close автоматически. Поисковики индексируют содержимое <details> даже в закрытом состоянии. Отлично подходит для FAQ и спойлеров.

<mark>

Выделение текста как релевантного в текущем контексте — например, результатов поиска или ключевых слов в цитате. Не путайте с <strong> (важность) и <em> (акцент). <mark> — это «помечено как релевантное», а не «важно» или «выделено для красоты».

<data> и <output>

<data value="42">Сорок два</data> — связывает человекочитаемый текст с машиночитаемым значением. <output> — результат вычисления или действия пользователя. Оба тега редко используются в контентных сайтах, но незаменимы в веб-приложениях с формами и калькуляторами.

Пример разметки тега <figure> с подписью:
HTML
<!-- figure + figcaption для изображения -->
<figure>
  <img
    src="/images/html5-structure.webp"
    alt="Схема семантической структуры HTML5 страницы"
    width="800" height="450"
  >
  <figcaption>Рис. 1 — Типичная семантическая структура HTML5 документа</figcaption>
</figure>

<!-- figure + figcaption для кода -->
<figure>
  <pre><code class="language-html">&lt;article&gt;...&lt;/article&gt;</code></pre>
  <figcaption>Пример: минимальная разметка статьи</figcaption>
</figure>

<!-- time с атрибутом datetime -->
<p>
  Статья обновлена:
  <time datetime="2026-05-22T10:30:00+03:00">22 мая 2026</time>
</p>

<!-- details + summary (FAQ без JS) -->
<details>
  <summary>Что такое семантический HTML?</summary>
  <p>Разметка, где каждый тег передаёт смысл содержимого,
     а не только его внешний вид.</p>
</details>

<!-- mark для выделения поиска -->
<p>Результаты по запросу «<mark>семантические теги</mark>» — 42 статьи</p>

Вложенность и комбинации: реальные примеры

Семантическая сила HTML5 раскрывается не в отдельных тегах, а в их правильной комбинации. Разберём типичные архитектуры страниц.

Страница листинга блога

HTML
<main>
  <header>
    <h1>Блог о SEO</h1>
    <p>Практические статьи о продвижении сайтов</p>
  </header>

  <!-- Список статей — каждая карточка это article -->
  <section aria-label="Список статей">
    <article>
      <header>
        <h2><a href="/blog/semantic-html5">Семантические теги HTML5</a></h2>
        <p>
          <time datetime="2026-05-22">22 мая 2026</time>
          · <span>18 мин чтения</span>
        </p>
      </header>
      <p>Семантические теги HTML5 — фундамент правильной разметки страницы...</p>
      <footer>
        <a href="/blog/semantic-html5">Читать далее</a>
      </footer>
    </article>

    <article>
      <header>
        <h2><a href="/blog/heading-structure">Структура заголовков</a></h2>
        <p>
          <time datetime="2026-04-10">10 апреля 2026</time>
          · <span>12 мин чтения</span>
        </p>
      </header>
      <p>H1 на странице один. H2 делит контент на разделы...</p>
      <footer>
        <a href="/blog/heading-structure">Читать далее</a>
      </footer>
    </article>
  </section>

  <!-- Пагинация -->
  <nav aria-label="Пагинация">
    <a href="?page=1" aria-current="page">1</a>
    <a href="?page=2">2</a>
    <a href="?page=3">3</a>
  </nav>
</main>

Карточка товара с отзывами

HTML
<main>
  <article itemscope itemtype="https://schema.org/Product">

    <!-- Главная часть товара -->
    <header>
      <h1 itemprop="name">Беспроводные наушники SoundMax Pro</h1>
      <p itemprop="description">40 часов без подзарядки, активное шумоподавление...</p>
    </header>

    <!-- Изображение товара -->
    <figure>
      <img
        src="/products/soundmax-pro.webp"
        alt="Беспроводные наушники SoundMax Pro — вид спереди"
        itemprop="image"
        width="600" height="600"
      >
      <figcaption>SoundMax Pro в трёх цветах: чёрный, белый, синий</figcaption>
    </figure>

    <!-- Цена -->
    <section aria-label="Цена и покупка">
      <p>
        <data value="9990" itemprop="price">9 990 ₽</data>
      </p>
      <button type="button">Добавить в корзину</button>
    </section>

    <!-- Характеристики -->
    <section>
      <h2>Характеристики</h2>
      <dl>
        <dt>Время работы</dt><dd>40 часов</dd>
        <dt>Подключение</dt><dd>Bluetooth 5.3</dd>
        <dt>Вес</dt><dd>250 г</dd>
      </dl>
    </section>

    <!-- Блок отзывов — каждый отзыв это article внутри article -->
    <section aria-label="Отзывы покупателей">
      <h2>Отзывы</h2>

      <article>
        <header>
          <strong>Анна К.</strong>
          <time datetime="2026-04-15">15 апреля 2026</time>
        </header>
        <p>Отличные наушники, звук чистый. Шумодав работает отлично.</p>
      </article>

      <article>
        <header>
          <strong>Михаил Р.</strong>
          <time datetime="2026-03-28">28 марта 2026</time>
        </header>
        <p>40 часов — это реально. Брал в командировку, хватило на неделю.</p>
      </article>
    </section>

  </article>
</main>

Лендинг с секциями и боковой панелью

HTML
<body>
  <header>
    <nav aria-label="Основная навигация">
      <!-- логотип + меню -->
    </nav>
  </header>

  <main>
    <!-- Hero-секция -->
    <section aria-labelledby="hero-title">
      <h1 id="hero-title">SEO-продвижение для вашего бизнеса</h1>
      <p>Увеличиваем органический трафик с гарантией результата</p>
      <a href="#contacts" role="button">Получить аудит</a>
    </section>

    <!-- Услуги -->
    <section>
      <h2>Наши услуги</h2>
      <ul role="list">
        <li>
          <article>
            <h3>Технический аудит</h3>
            <p>Полная проверка технического состояния сайта...</p>
          </article>
        </li>
        <li>
          <article>
            <h3>Контентная стратегия</h3>
            <p>Семантическое ядро и план публикаций...</p>
          </article>
        </li>
      </ul>
    </section>

    <!-- Основной контент + боковая панель -->
    <div class="layout-two-col">
      <section>
        <h2>Кейсы</h2>
        <!-- ... -->
      </section>

      <aside aria-label="Контакты">
        <h2>Связаться с нами</h2>
        <address>
          <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
          <p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
        </address>
      </aside>
    </div>
  </main>

  <footer>
    <nav aria-label="Карта сайта">
      <ul>
        <li><a href="/blog">Блог</a></li>
        <li><a href="/glossary">Глоссарий</a></li>
      </ul>
    </nav>
    <p><small>&copy; 2026 seohead.tech</small></p>
  </footer>
</body>
В примере с лендингом мы используем aria-labelledby для связи секции с заголовком через id. Это позволяет скринридеру назвать секцию правильно, даже если заголовок стилизован нестандартно. Хорошая практика для всех <section> и <nav>, где имя неочевидно из структуры.
HTML
<!-- Можно иметь несколько <nav> — важно различать их через aria-label -->

<!-- Хлебные крошки -->
<nav aria-label="Хлебные крошки">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/blog">Блог</a></li>
    <li aria-current="page">Семантические теги HTML5</li>
  </ol>
</nav>

<!-- Основная навигация в <header> -->
<nav aria-label="Основная навигация">
  <ul>
    <li><a href="/blog" aria-current="page">Блог</a></li>
    <li><a href="/services">Услуги</a></li>
  </ul>
</nav>

<!-- Пагинация в конце листинга -->
<nav aria-label="Страницы блога">
  <a href="?page=1" rel="prev" aria-label="Предыдущая страница">←</a>
  <a href="?page=1">1</a>
  <span aria-current="page">2</span>
  <a href="?page=3">3</a>
  <a href="?page=3" rel="next" aria-label="Следующая страница">→</a>
</nav>

<!-- Внутристраничная навигация (оглавление) -->
<nav aria-label="Содержание статьи">
  <ol>
    <li><a href="#structural-tags">Структурные теги</a></li>
    <li><a href="#content-tags">Теги для контента</a></li>
    <li><a href="#nesting-examples">Примеры вложенности</a></li>
  </ol>
</nav>

Влияние на SEO: что реально получает поисковик

Семантическая разметка напрямую влияет на то, как Googlebot понимает, индексирует и представляет страницу в результатах поиска. Вот конкретные механизмы.

Выделение главного контента

Google использует <main> для определения основного контента страницы. Контент в шапке, подвале и <aside> получает меньший вес при ранжировании. Если весь текст находится в <div class="main">, Google тратит дополнительный ресурс на понимание структуры.

Атрибуция даты и автора

Тег <time datetime="2026-05-22"> даёт Google точную дату публикации, что влияет на понимание свежести контента. <address> с rel="author" связывает статью с автором. Оба сигнала используются при формировании rich snippets в поиске.

Расширенные сниппеты

<details> + <summary> индексируются Google и могут появляться как раскрывающиеся блоки в результатах поиска (People Also Ask). <figure> + <figcaption> влияют на индексацию изображений и их отображение в Google Images.

Внутренняя перелинковка

Ссылки внутри <nav> получают навигационный контекст. Ссылки внутри <article> — контентный. Googlebot учитывает положение ссылки на странице при оценке её веса. Ссылка из основного текста <article> ценнее ссылки из <aside>.

Schema.org (JSON-LD) и семантические HTML5 теги — взаимодополняющие, а не конкурирующие инструменты. Семантика задаёт структуру документа. Schema.org добавляет машиночитаемые данные о типе контента, сущностях и свойствах. Вместе они дают Google исчерпывающее понимание страницы.

Частые ошибки в семантической разметке

Большинство ошибок возникает из привычки к div-вёрстке или из неправильного понимания назначения тегов.

HTML
<!-- ОШИБКА 1: <section> вместо <div> для стилизации -->
<section class="flex-wrapper">  <!-- нет заголовка = не section -->
  <img src="photo.jpg" alt="">
</section>
<!-- ПРАВИЛЬНО -->
<div class="flex-wrapper">
  <img src="photo.jpg" alt="Описание фото">
</div>

<!-- ОШИБКА 2: <article> для карточки без самостоятельного смысла -->
<article class="feature-card">
  <span class="icon">⚡</span>
  <h3>Быстрая доставка</h3>
</article>
<!-- ПРАВИЛЬНО: карточка-преимущество — это li или div, не article -->
<li class="feature-card">
  <span class="icon" aria-hidden="true">⚡</span>
  <h3>Быстрая доставка</h3>
</li>

<!-- ОШИБКА 3: <header> как синоним <div class="header"> -->
<header class="section-header">
  <h2>Наши преимущества</h2>
</header>
<!-- ПРАВИЛЬНО: <header> нужен только если у секции есть вводная группа -->
<section>
  <h2>Наши преимущества</h2>  <!-- h2 сразу, без header-обёртки -->
  ...
</section>

<!-- ОШИБКА 4: два <main> -->
<main>Основной контент</main>
<main>Тоже важный контент</main>  <!-- невалидно! -->
<!-- ПРАВИЛЬНО: один <main>, дополнительное — в <aside> -->
<main>Основной контент</main>
<aside>Дополнительный контент</aside>

<!-- ОШИБКА 5: <address> для адреса офиса в тексте -->
<address>ул. Ленина, 1, Москва</address>  <!-- не в контексте автора/организации -->
<!-- ПРАВИЛЬНО -->
<p>Адрес офиса: ул. Ленина, 1, Москва</p>
<!-- или в footer как контактная информация сайта: -->
<footer>
  <address>
    <a href="mailto:[email protected]">[email protected]</a>
  </address>
</footer>
Самая распространённая ошибка — использовать <section> как красивое имя для блока-обёртки без смыслового значения. Простой тест: если можно заменить <section> на <div> и ничего не изменится с точки зрения смысла — значит, правильный тег — <div>.

Ещё одна частая проблема — пустые alt-атрибуты или их отсутствие. Изображения внутри <figure> должны иметь либо осмысленный alt, либо alt="" (если изображение декоративное и описано <figcaption>). Никогда не опускайте атрибут alt полностью — это нарушение доступности и HTML-валидации.

HTML
<!-- Декоративное изображение: alt пустой, figcaption описывает -->
<figure>
  <img src="chart.png" alt="" role="presentation">
  <figcaption>График роста органического трафика за 6 месяцев: +340%</figcaption>
</figure>

<!-- Информативное изображение: alt полный -->
<figure>
  <img
    src="html5-tags-map.png"
    alt="Карта семантических тегов HTML5: header, nav, main, article, section, aside, footer"
  >
  <figcaption>Рис. 2 — Полная карта семантических элементов HTML5</figcaption>
</figure>

<!-- Ошибка: нет alt совсем -->
<img src="diagram.png">  <!-- невалидно! -->

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

Прямого «бонуса за семантику» нет. Но семантика косвенно влияет на ранжирование: Google точнее извлекает главный контент (что повышает точность ранжирования по запросу), корректно атрибутирует дату и автора (сигналы E-E-A-T), а контент в <main> получает больший вес, чем в шапке или подвале. Кроме того, правильная семантика — базовое требование для большинства структурированных данных.
Да, и это правильно. Классический пример: карточка товара (<article>) содержит раздел отзывов, где каждый отзыв — тоже <article>. Или статья блога (<article>) содержит встроенный пост из соцсети (<article>). Вложенность <article> означает, что внутренний элемент — самостоятельный контент, связанный с внешним.
<strong> обозначает важность содержимого (скринридеры акцентируют его). <b> — просто стилистическое выделение без семантики важности. <em> добавляет словесный акцент («я не говорил, что он украл» — акцент меняет смысл). <i> — курсив без акцента: термины, иностранные слова, технические названия. Для SEO разница минимальна, для доступности — существенна.
Нет. Тег <main> уже имеет неявную ARIA-роль main. Добавлять role="main" избыточно. То же касается <nav> (роль navigation), <header> на уровне страницы (роль banner), <footer> (роль contentinfo). Дублировать тег и роль не нужно — это создаёт путаницу в дереве доступности.
Семантика важна вдвойне. Поскольку SPA генерирует HTML динамически, роботы-краулеры и скринридеры получают структуру только из JavaScript-рендеринга. Убедитесь, что при переходах между «страницами» обновляется <title>, фокус переносится на <main>, а семантическая структура каждой «страницы» воспроизводится корректно. React и Vue не препятствуют использованию семантики — это вопрос дисциплины команды.