Сколько HTML-тегов вы реально используете? У большинства верстальщиков арсенал сводится к десятку: div, p, a, img, span, заголовки и списки. Остальные 100+ тегов из спецификации пылятся без дела, просто потому что о них забыли или не знали.

А зря. Браузеры научились понимать семантику глубже, чем кажется. Скринридеры цепляются за неё. Поисковики парсят структуру. Правильный тег в нужном месте даёт доступность, SEO и читаемый код, без единой строчки JS.

Мы отобрали 18 HTML-тегов, которые стоит добавить в повседневную разметку. Они не новые в смысле «только вышли из черновика», но новые для многих разработчиков, потому что их незаслуженно обходят стороной. Часть, из HTML5, часть жила в спецификации всегда. У каждого, живой пример и пояснение, где он реально выручает.

💡 Быстрый обзор:

• Какие теги решают вопросы доступности и семантики без JavaScript
• Где пригодятся sub/sup, dfn, var и time для разметки текста
• Как <q>, <blockquote> и <cite> правильно оформляют цитаты
• Зачем <video>, <picture> и <figure> собирают медиаконтент
• Что дают del/ins, meter, dialog и menu в интерфейсах

1. Семантическая разметка текста, sub, sup, dfn, var, time, kbd

Пять тегов, которые превращают обычный текст в структурно понятный и машине, и человеку. Никакого JS, только нативный HTML.

<sub>** и **<sup>, нижний и верхний индексы. Химические формулы, математические степени, сноски. CSS может визуально опустить или поднять текст через vertical-align, но семантику не передаст. А она важна: скринридер озвучит «H два O», а не «H два O» как обычный текст. Не используйте их для чисто оформительских задач, для этого есть стили.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>, определяемый термин. Когда вы вводите новое понятие и даёте ему определение, оборачивайте термин в этот тег. Браузер не делает с ним ничего визуально, но поисковики и словарные расширения цепляются за <dfn> чтобы построить глоссарий страницы. Атрибут id позволяет делать обратные ссылки при повторном упоминании.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

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

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>, дата или время. Машины плохо парсят «2 апреля» посреди абзаца. Тег <time> изолирует дату и через атрибут datetime даёт машиночитаемый формат. Календари, поисковики, парсеры мероприятий, все скажут спасибо.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>, клавиатурный ввод. Инструкции, сочетания клавиш, команды. Визуально выделяется моноширинным шрифтом, семантически отделяет имена клавиш от остального текста. Можно вкладывать друг в друга для комбинаций.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Цитаты и ссылки на источники, q, blockquote, cite

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

<q>, встроенная цитата внутри абзаца. Браузер автоматически оборачивает содержимое в кавычки, соответствующие языку страницы. Необязательный атрибут cite указывает URL первоисточника, пользователь его не видит, но машины считывают.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>, блочная цитата. Для развёрнутых фрагментов: абзац из статьи, отзыв, выдержка из спецификации. Тоже поддерживает cite. Визуально браузер добавляет отступ, а стилизовать можно как угодно.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>, название цитируемого произведения. Только название: книги, статьи, фильма, игры. Не имя автора, не дата, именно название. По умолчанию браузеры показывают курсивом. Часто путают с атрибутом cite у <q>/<blockquote>, это разные вещи: атрибут хранит URL, а тег <cite> показывает название пользователю.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Структура документа: address и dl/dt/dd

<address>, контактная информация. Не почтовый адрес офиса (для этого есть микроразметка Schema), а контакты автора страницы или статьи. Если помещён внутри <article>, относится к автору статьи, если в <body>, к владельцу всего сайта. Поисковики используют этот блок для построения Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>, список определений. Не просто «глоссарий терминов», а любая структура «ключ, значение»: список характеристик товара, метаданные, FAQ. Один термин (<dt>) может иметь несколько описаний (<dd>), и наоборот. Порядок важен: сначала термин, потом его описание.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Медиаконтент, video, picture и figure/figcaption

Три мощных инструмента для работы с визуальным и мультимедийным контентом. Каждый закрывает свой пласт задач.

<video>, встроенное видео без сторонних плееров. Можно указать один src или несколько <source>, браузер выберет первый поддерживаемый формат. Полезная деталь: атрибут autopictureinpicture автоматически сворачивает видео в плавающее окно при переключении вкладки, а disablepictureinpicture, запрещает. Аналогично disableremoteplayback управляет трансляцией на Chromecast и Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>, адаптивные изображения с полным контролем. В отличие от srcset на <img>, где браузер сам выбирает источник, <picture> даёт вам указывать жёсткие медиавыражения. Разные форматы (WebP для Chromium, JPEG для остальных), разные кадрирования под мобильные, тёмная версия картинки для dark mode, и всё это без единой строчки JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** и **<figcaption>, самодостаточный контент с подписью. Иллюстрация, диаграмма, листинг кода, таблица, всё, что можно вынести из основного потока без потери смысла. <figcaption> семантически связывает подпись с содержимым: скринридер зачитывает их вместе, а не как разрозненные элементы. Если контент лишь косвенно связан с текстом (например, цитата в боковой панели), лучше взять <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Навигационные карты, map и area

Старый, но не устаревший механизм. Карты изображений делают отдельные области картинки кликабельными ссылками. Там, где текст бессилен, например, интерактивная схема метро, план здания или анатомический рисунок, <map> с <area> работают без JS.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

Атрибут shape принимает circle, rect, poly и default. Координаты, в пикселях от левого верхнего угла. Для сложных контуров, poly с перечислением точек. Несмотря на почтенный возраст (тегу сильно за двадцать), он стабильно поддерживается всеми браузерами.

6. Редактирование текста — del и ins

Когда вы показываете правки, изменения в документе, обновление статьи, diff законодательства, <del> и <ins> дают семантически корректное представление. <del> показывает удалённое (браузеры зачёркивают), <ins>, добавленное (подчёркивают).

Оба поддерживают атрибуты cite (почему изменено) и datetime (когда). Поисковик видит историю изменений страницы, а не просто переписанный текст.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Не используйте <del> и <ins> для чисто оформительского зачёркивания, для этого есть text-decoration: line-through. Они именно про версионирование контента.

7. Поля ввода нового поколения:

Элемент <input> далеко ушёл от текстовых строк. Современные браузеры поддерживают десятки типов, и каждый тянет за собой встроенную валидацию, специфичную клавиатуру на мобильных и нативные виджеты, без единой строки JavaScript.

Ключевые типы, которые до сих пор игнорируют на многих проектах:

• type="color", палитра цветов. Нативный пикер, не нужно тащить спектрум-библиотеку.
• type="range", ползунок между min и max. Громкость, цена, оценка, всё без вёрстки слайдера.
• type="date", локализованный календарь. Браузер показывает выбор даты, формат подстраивается под регион пользователя.
• type="datetime-local", дата и время без часового пояса. Для бронирований, дедлайнов, планировщиков.

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

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Числовые индикаторы:

Не путайте с <progress>: <meter>, для статического значения в известном диапазоне (заполненность диска, оценка, рейтинг), а <progress>, для прогресса выполнения задачи (загрузка, пошаговый процесс).

Браузер автоматически раскрашивает <meter> в зависимости от того, где значение находится относительно low, high и optimum. Зелёная зона, значение около оптимума, жёлтая, терпимо, красная, за пределами нормы. Логика цветов настраивается через CSS, но базовая семантика работает из коробки.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Интерактивные элементы — dialog и menu

Два тега для взаимодействий, которые раньше требовали JS-библиотек или вёрстки с нуля.

<dialog>, нативное модальное окно. Сам по себе элемент скрыт. Добавляете атрибут open, и браузер показывает его поверх страницы, в слое top layer. JavaScript-метод showModal() даёт ещё и псевдоэлемент ::backdrop для затемнения фона. Попап, подтверждение действия, alert, без единой строчки CSS-позиционирования.

Поддержка: Chrome, Edge, Firefox, Safari (с 2022 года). Для старых браузеров диалог просто отображается как обычный блок-контейнер, есть полифилы.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>, список интерактивных действий. Не навигация (для неё <nav>), а именно панель инструментов: кисти в графическом редакторе, кнопки форматирования, действия над объектом. Семантический эквивалент <ul>, но для кнопок и команд. По умолчанию не имеет стилей, только смысл.

Атрибут type="toolbar" (единственный оставшийся в спецификации) явно задаёт роль панели. Контекстный тип удалён из стандарта, так что <menu> сегодня, исключительно для видимых наборов действий на экране.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Если тема HTML-разметки для вас новая, вот отличное введение от Траверси, канал Traversy Media, один из лучших по фронтенду на YouTube:

⁉️🤔 Частые вопросы

Зачем использовать семантические теги, если можно всё сверстать на <div> и <span>?

Скринридеры ориентируются на теги чтобы строить структуру страницы для незрячих пользователей, div для них невидим. Поисковики извлекают семантику для расширенных сниппетов: рейтинг из <meter>, FAQ из <dl>, контакты из <address>. Плюс код читается сам себя: <article> сразу говорит «это статья», а <div class="article">, нет.

Какие теги из списка уже безопасно использовать в продакшене?

Все восемнадцать. <dialog> получил кросс-браузерную поддержку с Safari 15.4 (2022 год), <menu> де-факто работает как семантическая обёртка везде. <picture> и <video> с <source>, зрелые с 2016 года. <meter>, <time>, <kbd>, <dfn>, из глубокого наследия HTML, поддержка везде. Единственный нюанс: <input type="date"> и type="color" могут рендериться по-разному в разных ОС, но это не ломает функциональность.

<b>** и <i> умерли?**

Нет, но их роль изменилась. <b> теперь для привлечения внимания без придания значимости (ключевые слова в резюме), <i>, для идиоматических выражений, терминов на другом языке, названий кораблей. Для выделения важного, <strong>, для эмфазы, <em>. Стилистический жирный/курсив, только CSS.

Можно ли использовать <meter> для прогресс-бара загрузки?

Нет. <meter>, для статического значения в известном диапазоне (заполненность диска, оценка, рейтинг). Для прогресса во времени, строго <progress>. Браузеры анимируют <progress> при изменении value, а <meter>, статичен. Их путают постоянно, но семантика разная и скринридеры озвучивают по-разному.

Что делать, если браузер не поддерживает <dialog>?

Элемент просто отображается как блочный контейнер, не сломается. Добавьте полифил: dialog-polyfill от Google Chrome team (400 строк, без зависимостей) закрывает showModal(), close() и ::backdrop для старых браузеров.

Какой тег взять в работу первым?

{iframe} и <picture>, два тега, которые дают максимум пользы при минимуме усилий. {iframe} заменит любой сторонний видеоплеер нативным окном с картинка-в-картинке. <picture> избавит от ручного переключения форматов WebP/AVIF, браузер сам возьмёт то, что понимает.

Дальше по нарастающей: <input> с современными типами (color, date, range) срежет килобайты JS-виджетов. <dialog> уберёт зависимость от модальных библиотек. <del>/<ins> наведёт порядок в версионировании контента.

Не обязательно внедрять все 18 за один спринт. Начните с одного тега в неделю. Через полгода ваша разметка станет семантически богатой, а код, самодокументированным. Без единой строчки JavaScript там, где он не нужен.

Не знаете с чего начать, откройте текущий проект, найдите ближайший <div class="..."> без явной семантики и замените подходящим тегом из списка. Разница в читаемости кода будет заметна сразу.