Скільки 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="..."> без явної семантики та замініть відповідним тегом зі списку. Різниця в читаності коду буде помітна одразу.