Семантические теги HTML: шпаргалка для верстальщика

Сделал для себя шпаргалку по семантическим тегам 🙂 буду добавлять и редактировать

Landmarks (скелет страницы)

<header> — шапка страницы или секции/статьи. Может быть несколько.
<nav> — навигация (меню, хлебные крошки, пагинация). Давайте aria-label.
<main> — уникальное основное содержимое. Один на страницу.
<aside> — боковой/доп. контент (сайдбар, промо, «похожие»).
<section> — тематический раздел. Обязательно заголовок (h2–h6 или
aria-labelledby).
<article> — самодостаточный блок (пост, карточка товара, комментарий).
<footer> — подвал страницы или секции/статьи.
<form role="search">…</form> — форма поиска как отдельный landmark.

Правила
<main> — один; <nav>/<header>/<footer> — может быть несколько, помечайте aria-label.
<section> — используем только при наличии смысла и заголовка; иначе — div.

Заголовки и текст

<h1>…<h6> — иерархия заголовков (обычно 1× h1).
<p> — абзац.
<hr> — смена темы/сцены.
<blockquote> — блочная цитата (возможен атрибут cite).
<q> — короткая цитата в строке.
<cite> — название источника/произведения.
<abbr title="…"> — аббревиатура с расшифровкой.
<dfn> — определяемый термин.
<small> — примечания/дисклеймеры.
<mark> — подсветка релевантного фрагмента.
<time datetime="YYYY-MM-DDThh:mm"> — дата/время.
<del> / <ins> — правки.
<sup> / <sub> — индексы.
<bdi> / <bdo dir="rtl|ltr"> — направление текста.

Медиа и подписи

<figure> — автономный медиаблок.
<figcaption> — подпись к содержимому <figure>.
<img alt="…"> — содержательный alt, для декора — пустой
alt="".
<picture> + <source> — адаптивные изображения.
<svg> — инлайновая графика (при необходимости role="img",
aria-label).
<audio>, <video>, <track> — медиа и субтитры.

Пример <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Герой с ноутбуком у окна">
</picture>

Пример <figure>:

<figure role="figure" aria-label="повторить содержимое figcaption здесь">
  <!-- содержимое figure, если это изображение — добавить атрибут alt -->
  <img src="image.jpg" alt="Описание изображения">
  <figcaption>
    Подпись к иллюстрации
  </figcaption>
</figure>

<figure>
  <figcaption>Пример функции JavaScript</figcaption>
  <pre><code>
    function greet(name) {
      return "Hello, " + name + "!";
    }
  </code></pre>
</figure>

Списки и навигация

<ul> — немаркированный список.
<ol> — нумерованный список.
<li> — элемент списка.

Хлебные крошки:

<nav aria-label="Хлебные крошки">
  <ol>
    <li><a href="/">Главная</a></li>
    <li aria-current="page">Статья</li>
  </ol>
</nav>

Пагинация:

<nav aria-label="Пагинация">
  <ul>
    <li><a href="?p=1">1</a></li>
    <li><a aria-current="page">2</a></li>
  </ul>
</nav>

Таблицы (для табличных данных)

<table>, <caption>, <thead>, <tbody>,
<tfoot>, <tr>, <th scope="col|row">,
<td>.
Сложные связи: id на <th> и headers на <td>.
<colgroup> / <col> — оформление колонок.

Пример таблицы:

<table>
  <caption>Тарифы</caption>
  <thead>
    <tr>
      <th scope="col">План</th>
      <th scope="col">Цена</th>
      <th scope="col">Трафик</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Базовый</th>
      <td>€9</td>
      <td>10GB</td>
    </tr>
  </tbody>
</table>

Формы

<form> — контейнер формы; используйте action/method по необходимости.
<label for="…"> — подпись к контролу.
<fieldset> + <legend> — группировка.
<input type="…">, <textarea>, <select>,
<option>, <optgroup>, <datalist>,
<output>.
<meter> — известный диапазон; <progress> — ход задачи.
Валидация/подсказки: required, min/max/step/pattern, autocomplete,
aria-describedby, role="alert".

Форма поиска:

<form role="search" action="/search">
  <label for="q">Поиск</label>
  <input id="q" name="q" type="search" autocomplete="off">
  <button type="submit">Найти</button>
</form>

Раскрывающиеся и диалоги

<details> / <summary> — простые раскрывашки.

<details>
  <summary>Показать код</summary>
  <pre><code>…</code></pre>
</details>

<dialog> — модальные/диалоги (JS: .showModal(), .close()).

<dialog aria-labelledby="dlg-title">
  <h2 id="dlg-title">Подписка</h2>
  <form method="dialog">
    <button>Закрыть</button>
  </form>
</dialog>

Код и техтексты

<pre> — сохранение пробелов/переносов.
<code> — фрагменты кода.
<samp> — вывод программы.
<kbd> — ввод/клавиши.
<var> — переменная.

Карточки и контентные блоки

Карточка-статья:

<article class="card">
  <h2><a href="/post/slug/">Оптимизация LCP</a></h2>
  <p>Коротко о главном…</p>
  <time datetime="2025-08-30">30 авг 2025</time>
</article>

Раздел с карточками:

<section aria-labelledby="latest">
  <h2 id="latest">Свежие публикации</h2>
  <!-- список &lt;article&gt; -->
</section>

A11y-минимум (что реально помогает)

Landmarks «из коробки»: header → banner, nav → navigation, main → main,
aside → complementary, footer → contentinfo, form[role="search"] → search.
aria-label/aria-labelledby — подписи для нескольких nav, сайдбаров и сложных секций.
aria-current="page" — активный пункт меню/страницы.
aria-expanded/aria-controls — для кастомных раскрывашек.
role="alert" — точечные ошибки в формах.

Мини-чеклист перед релизом

На странице один <main>.
У каждого <section> есть заголовок или aria-labelledby.
Меню/крошки/пагинация — в <nav> с понятным aria-label.
Изображения: корректные alt (или пустой alt="" для декора).
Формы: связки label for, валидация и aria-describedby/role="alert".
Ссылки ведут (<a>), кнопки действуют (<button>).

Обсудить статью можно в телеграм - канале

Шпаргалка: семантические теги HTML