Семантические теги HTML5: полное руководство с примерами
Как семантический HTML проясняет структуру страницы для людей и машин, где он помогает доступности и почему это не короткий путь к позициям.
До HTML5 веб был морем div и span с CSS-классами вроде .header, .sidebar, .footer. Поисковые роботы и скринридеры вынуждены были угадывать, что есть что. HTML5 ввёл семантические теги — элементы, которые несут смысл сами по себе, независимо от CSS. Тег <article> обозначает самодостаточный материал. <nav> — навигацию. <aside> — дополнительный контент, связанный с основным, но не обязательный для понимания.
Структурные теги страницы
HTML5 ввёл набор тегов для разметки крупных областей страницы. Они образуют скелет документа, по которому браузеры, поисковые системы и вспомогательные технологии могут пройти, не читая CSS.
- <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> — примечание или цитата, не критичные для понимания основного текста. На уровне страницы — боковая колонка.
Базовый скелет любой страницы выглядит так — и это уже семантически корректная разметка:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<header>
<a href="/"><img src="logo.svg" alt="Company name"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<!-- Unique page content -->
</main>
<footer>
<p>© 2026 Company name</p>
<nav aria-label="Secondary navigation">
<a href="/privacy">Privacy</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Теги для контента: article, section, h1–h6, p
Структурные теги задают области страницы. Теги содержимого описывают природу самого контента. Посмотрим на сочетание, которое встречается на каждой странице блога.
<!-- Blog post page -->
<main>
<article>
<header>
<h1>How to choose the right HTML tag</h1>
<p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
<address>
By: <a rel="author" href="/authors/pavlo">seohead</a>
</address>
</header>
<section>
<h2>Why semantics matters</h2>
<p>Section text...</p>
</section>
<section>
<h2>Main tags</h2>
<p>Section text...</p>
<aside>
<p>Note: the HTML Living Standard is continuously updated.</p>
</aside>
</section>
<footer>
<p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
</footer>
</article>
<!-- Related articles -->
<aside aria-label="Related articles">
<h2>Also read</h2>
<ul>
<li><a href="/blog/heading-structure">Heading structure</a></li>
<li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
</ul>
</aside>
</main>Когда использовать section, а когда div
Правило простое: если у блока есть смысловое название, используйте <section>. Если блок нужен только для оформления или как хук для JavaScript, используйте <div>.
<!-- CORRECT: section with a heading -->
<section>
<h2>Product benefits</h2>
<ul>
<li>Fast delivery</li>
<li>2-year warranty</li>
</ul>
</section>
<!-- CORRECT: div for styling -->
<div class="cards-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- WRONG: section with no heading -->
<section class="cards-grid">
<article>...</article>
</section>
<!-- WRONG: div where content has meaning -->
<div id="about">
<!-- The About section — this should be <section> -->
<h2>About us</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> — скрытое содержимое. Браузер сам открывает и закрывает блок. Поисковые системы индексируют содержимое <details>, даже когда блок закрыт. Подходит для FAQ и спойлеров.
<mark>
Выделяет текст как релевантный в текущем контексте, например результаты поиска или ключевые слова в цитате. Не путайте с <strong> (важность) и <em> (акцент). <mark> означает «отмечено как релевантное», а не «важно» и не «оформлено для красоты».
<data> и <output>
<data value="42">Сорок два</data> связывает понятный человеку текст с машиночитаемым значением. <output> показывает результат вычисления или действия пользователя. Оба тега редко встречаются на контентных сайтах, но незаменимы в веб-приложениях с формами и калькуляторами.
<figure> с подписью:<!-- figure + figcaption for an image -->
<figure>
<img
src="/images/html5-structure.webp"
alt="Diagram of the semantic structure of an HTML5 page"
width="800" height="450"
>
<figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>
<!-- figure + figcaption for code -->
<figure>
<pre><code class="language-html"><article>...</article></code></pre>
<figcaption>Example: minimal article markup</figcaption>
</figure>
<!-- time with datetime attribute -->
<p>
Article updated:
<time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>
<!-- details + summary (FAQ without JS) -->
<details>
<summary>What is semantic HTML?</summary>
<p>Markup where each tag conveys the meaning of the content,
not just its visual appearance.</p>
</details>
<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>Вложенность и комбинации: реальные примеры
Семантическая сила HTML5 проявляется не в отдельных тегах, а в их правильном сочетании. Разберём типичные архитектуры страниц.
Страница списка статей блога
<main>
<header>
<h1>SEO blog</h1>
<p>Practical articles on website promotion</p>
</header>
<!-- Article list — each card is an article -->
<section aria-label="Article list">
<article>
<header>
<h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
<p>
<time datetime="2026-05-22">22 May 2026</time>
· <span>18 min read</span>
</p>
</header>
<p>HTML5 semantic tags are the foundation of correct page markup...</p>
<footer>
<a href="/blog/semantic-html5">Read more</a>
</footer>
</article>
<article>
<header>
<h2><a href="/blog/heading-structure">Heading structure</a></h2>
<p>
<time datetime="2026-04-10">10 April 2026</time>
· <span>12 min read</span>
</p>
</header>
<p>One H1 per page. H2 divides content into sections...</p>
<footer>
<a href="/blog/heading-structure">Read more</a>
</footer>
</article>
</section>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>
</main>Карточка товара с отзывами
<main>
<article itemscope itemtype="https://schema.org/Product">
<!-- Product main area -->
<header>
<h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
<p itemprop="description">40 hours of battery life, active noise cancellation...</p>
</header>
<!-- Product image -->
<figure>
<img
src="/products/soundmax-pro.webp"
alt="SoundMax Pro wireless headphones — front view"
itemprop="image"
width="600" height="600"
>
<figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
</figure>
<!-- Price -->
<section aria-label="Price and purchase">
<p>
<data value="129" itemprop="price">$129</data>
</p>
<button type="button">Add to cart</button>
</section>
<!-- Specs -->
<section>
<h2>Specifications</h2>
<dl>
<dt>Battery life</dt><dd>40 hours</dd>
<dt>Connection</dt><dd>Bluetooth 5.3</dd>
<dt>Weight</dt><dd>250 g</dd>
</dl>
</section>
<!-- Reviews — each review is an article inside article -->
<section aria-label="Customer reviews">
<h2>Reviews</h2>
<article>
<header>
<strong>Anna K.</strong>
<time datetime="2026-04-15">15 April 2026</time>
</header>
<p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
</article>
<article>
<header>
<strong>Michael R.</strong>
<time datetime="2026-03-28">28 March 2026</time>
</header>
<p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
</article>
</section>
</article>
</main>Лендинг с секциями и боковой панелью
<body>
<header>
<nav aria-label="Main navigation">
<!-- logo + menu -->
</nav>
</header>
<main>
<!-- Hero section -->
<section aria-labelledby="hero-title">
<h1 id="hero-title">SEO promotion for your business</h1>
<p>We help businesses improve technical and content foundations</p>
<a href="#contacts" role="button">Get a free audit</a>
</section>
<!-- Services -->
<section>
<h2>Our services</h2>
<ul role="list">
<li>
<article>
<h3>Technical audit</h3>
<p>Full technical health check of your site...</p>
</article>
</li>
<li>
<article>
<h3>Content strategy</h3>
<p>Keyword universe and content calendar...</p>
</article>
</li>
</ul>
</section>
<!-- Main content + sidebar -->
<div class="layout-two-col">
<section>
<h2>Case studies</h2>
<!-- ... -->
</section>
<aside aria-label="Contact us">
<h2>Get in touch</h2>
<address>
<p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
<p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
</address>
</aside>
</div>
</main>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/glossary">Glossary</a></li>
</ul>
</nav>
<p><small>© 2026 seohead.tech</small></p>
</footer>
</body>Несколько <nav>: хлебные крошки и пагинация
<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->
<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML5 semantic tags</li>
</ol>
</nav>
<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog" aria-current="page">Blog</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
<a href="?page=1" rel="prev" aria-label="Previous page">←</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="Next page">→</a>
</nav>
<!-- In-page table of contents -->
<nav aria-label="Article contents">
<ol>
<li><a href="#structural-tags">Structural tags</a></li>
<li><a href="#content-tags">Content tags</a></li>
<li><a href="#nesting-examples">Nesting examples</a></li>
</ol>
</nav>Влияние на SEO: что получает поисковая система
Семантическая разметка даёт браузерам и вспомогательным технологиям более понятную структурную информацию. Она может упростить интерпретацию и поддержку страницы, но это не прямой рычаг ранжирования и не замена полезному контенту.
Определение основного контента
Google использует <main>, чтобы определить основное содержимое страницы. Контент в шапке, подвале и <aside> получает меньший вес при ранжировании. Если весь текст находится внутри <div class="main">, Google тратит дополнительные ресурсы на понимание структуры.
Дата и атрибуция автора
<time datetime="2026-05-22"> даёт Google точную дату публикации, что помогает оценить свежесть материала. <address> с rel="author" связывает статью с автором. Оба сигнала участвуют в формировании расширенных результатов в выдаче.
Расширенные результаты
Содержимое <details> + <summary> индексируется Google и может показываться в выдаче как раскрывающиеся блоки (People Also Ask). <figure> + <figcaption> влияют на индексацию изображений и на то, как они отображаются в Google Картинках.
Внутренняя перелинковка
Ссылки внутри <nav> получают навигационный контекст, а ссылки внутри <article> — контентный. Googlebot учитывает положение ссылки на странице при оценке её веса. Ссылка из основного текста <article> ценнее ссылки из <aside>.
Частые ошибки в семантической разметке
Большинство ошибок возникает из привычки верстать на div или из непонимания того, для чего нужен тег.
<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper"> <!-- no heading = not section -->
<img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
<img src="photo.jpg" alt="Photo description">
</div>
<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
<span class="icon">⚡</span>
<h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
<span class="icon" aria-hidden="true">⚡</span>
<h3>Fast delivery</h3>
</li>
<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
<h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
<h2>Our advantages</h2> <!-- h2 directly, no header wrapper -->
...
</section>
<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main> <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>
<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address> <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
<address>
<a href="mailto:hello@company.com">hello@company.com</a>
</address>
</footer>Ещё одна частая проблема — пустые или отсутствующие атрибуты alt. Изображения внутри <figure> должны иметь либо осмысленный alt, либо alt="", если изображение декоративное и описано в <figcaption>. Никогда не опускайте атрибут alt полностью: это нарушает требования доступности и валидацию HTML.
<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
<img src="chart.png" alt="" role="presentation">
<figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>
<!-- Informative image: full alt text -->
<figure>
<img
src="html5-tags-map.png"
alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
>
<figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>
<!-- Mistake: no alt at all -->
<img src="diagram.png"> <!-- invalid! -->Частые вопросы
Влияет ли семантическая разметка напрямую на ранжирование в Google?
Можно ли вкладывать <article> в <article>?
Чем <strong> отличается от <b>, а <em> от <i>?
Нужен ли role="main" вместе с тегом <main>?
Что с одностраничными приложениями (SPA) на React или Vue?
Check it with SpiderHead
Free and local: run the audit on your own machine.
