Исполняемые доки HTML: Семантический HTML

Q: Какие семантические теги есть в HTML?

Теги разметки страницы: , , , , , и . К другим распространенным семантическим тегам относятся , , , , , и заголовки от до .

Q: Является ли div семантическим элементом?

Нет. У нет собственного смысла; это универсальный блок для стилей и раскладки. Используйте его, когда не подходит ни один семантический тег, а , , и остальные, когда подходит.

Q: Сколько элементов main может быть на странице?

Один видимый на страницу. Он оборачивает содержимое, уникальное для этой страницы, и не должен находиться внутри , , , или .

Что такое семантический HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Удалите элемент <style>, и страница будет выглядеть как обычный текст, но структура останется для всех, кто читает код, и для программ, которые читают его, не глядя на пиксели.

Семантические теги разметки

Тег	Для чего	Ориентир для программ чтения с экрана
`<header>`	Вступление страницы или статьи: логотип, заголовок, подпись автора	banner (только когда он не внутри `article`, `aside`, `main`, `nav` или `section`)
`<nav>`	Блок основных навигационных ссылок	navigation
`<main>`	Содержимое, уникальное для этой страницы, один раз на странице	main
`<article>`	Самостоятельный фрагмент, понятный сам по себе: запись, комментарий, карточка товара	по умолчанию нет
`<section>`	Тематическая группа содержимого со своим заголовком	region, только когда у него есть доступное имя
`<aside>`	Связанный материал рядом с основным потоком: боковая панель, заметка	complementary
`<footer>`	Завершающая информация страницы или статьи: копирайт, автор, ссылки	contentinfo (только на уровне страницы)

У каждого тега есть отдельная страница с подробностями: header, nav, section и footer. Эта страница рассказывает, как они сочетаются.

Почему не просто div

Страница только из элементов <div> может выглядеть так же, как семантическая. Разница в том, что говорит разметка. Нажимайте кнопки, чтобы обвести элементы, несущие смысл, в каждой версии:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Версия на div находит 0, семантическая версия находит 4. Именно это видят вспомогательные технологии: на семантической странице пользователь программы чтения с экрана может сразу перейти к навигации или основному содержимому, а на странице из div ему приходится прочитать все подряд. Имена классов вроде class="nav" для браузера ничего не значат.

<div> по-прежнему правильный выбор для блоков, которые нужны только для стилей или раскладки, как flex-обертка .cols в первом примере.

main, article и aside

<main> оборачивает то, что уникально для этой страницы, и встречается один раз. Внутри него <article> отмечает содержимое, которое имело бы смысл само по себе, если скопировать его на другой сайт, а <aside> отмечает материал, связанный со статьей, но который можно удалить, не сломав ее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

У статьи свои <header> и <footer>. Они не ограничены уровнем страницы: каждый из них открывает или завершает ближайшую статью или раздел. Элемент <time datetime> дает дату в машиночитаемом виде, а показывает ее в понятном человеку.

Проверьте структуру заголовков

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

h4 под «Brewing» пропускает уровень. Замените его на h3, и структура станет чистой. Выбирайте уровни заголовков по структуре, а размер меняйте через CSS, если нужно крупнее или мельче.

Другие семантические теги

Семантика касается не только разметки страницы. Эти текстовые теги тоже несут смысл:

Тег	Смысл
`<strong>`	Важный текст (по умолчанию жирный)
`<em>`	Смысловое ударение (по умолчанию курсив)
`<figure>` и `<figcaption>`	Картинка, диаграмма или пример кода с подписью
`<time datetime="...">`	Дата или время в машиночитаемом виде
`<address>`	Контактные данные автора страницы или статьи
`<mark>`	Выделенный текст, например совпадение при поиске
`<abbr title="...">`	Сокращение с полной формой
`<button>`	То, что выполняет действие

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Наведите курсор на сокращение «W3C», чтобы увидеть полную форму во всплывающей подсказке.

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

Тег ради внешнего вида. <blockquote> нужен для цитат, а не для отступа; <h3> это уровень заголовка, а не средний жирный текст. Оформляйте через CSS.
Все обернуто в <section>. У раздела должны быть заголовок и тема. Если нужен блок для стилей, используйте <div>.
Больше одного видимого <main>. Оставьте один на страницу и никогда не вкладывайте его в <article>, <aside>, <header>, <nav> или <footer>.
Каждый список ссылок в <nav>. Оставьте его для основных блоков навигации, вроде меню сайта или оглавления. Нескольким ссылкам в подвале он не нужен.
Кликабельные элементы <div>. До <div onclick> нельзя добраться с клавиатуры. Используйте <button> для действий и <a href> для навигации.

Часто задаваемые вопросы

Что такое семантический HTML?

Семантический HTML это разметка, в которой каждый тег описывает смысл своего содержимого: <nav> для навигации, <article> для самостоятельного фрагмента, <button> для кнопки. Тогда браузер, программы чтения с экрана и поисковики понимают страницу, не угадывая по именам классов или стилям.

Какие семантические теги есть в HTML?

Теги разметки страницы: <header>, <nav>, <main>, <article>, <section>, <aside> и <footer>. К другим распространенным семантическим тегам относятся <figure>, <figcaption>, <time>, <address>, <strong>, <em> и заголовки от <h1> до <h6>.

Является ли div семантическим элементом?

Нет. У <div> нет собственного смысла; это универсальный блок для стилей и раскладки. Используйте его, когда не подходит ни один семантический тег, а <header>, <main>, <nav> и остальные, когда подходит.

Для чего нужен тег aside?

<aside> содержит материал, связанный с основным содержимым, но не входящий в его поток: боковую панель, блок связанных ссылок, пояснение к термину или выносную цитату. На уровне страницы программы чтения с экрана перечисляют его как дополнительный ориентир (complementary).

Сколько элементов main может быть на странице?

Один видимый <main> на страницу. Он оборачивает содержимое, уникальное для этой страницы, и не должен находиться внутри <header>, <nav>, <article>, <aside> или <footer>.

Помогает ли семантическая верстка SEO?

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

Связанные концепции