Теги HTML5: довідник з прикладами

Теги HTML — це не список, який треба визубрити, а інструмент розмітки змісту. Браузер, пошуковий робот і скрінрідер читають одну й ту саму сторінку по-різному, і єдине, на що всі вони спираються, — обрані вами теги. Нижче розібрано всі актуальні теги HTML5: що кожен із них означає, коли він доречний, який тег прийшов на зміну застарілому і які помилки трапляються у верстці найчастіше.

Як влаштований HTML-документ

Будь-яка сторінка — це дерево. У дерева один корінь <html> і дві гілки: <head> зі службовими даними та <body> з тим, що бачить відвідувач. Усе інше вкладається в ці дві гілки, і саме вкладеність визначає, як браузер побудує DOM, а CSS — до чого застосує стилі.

Мінімальний коректний документ HTML5 має такий вигляд:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Заголовок сторінки</title>
</head>
<body>
    <h1>Привіт</h1>
</body>
</html>

Чотири рядки в цьому прикладі обов’язкові до розуміння. <!DOCTYPE html> перемикає браузер у стандартний режим — без нього вмикається режим сумісності з документами двадцятирічної давнини, і розрахунок розмірів блоків змінюється. Атрибут lang підказує пошуковику та синтезатору мовлення мову тексту. <meta charset="UTF-8"> зобов’язаний бути в перших 1024 байтах документа, інакше кирилиця перетвориться на знаки питання. <meta name="viewport"> відповідає за те, щоб на телефоні сторінку не показали в масштабі «вся десктопна ширина дрібним шрифтом».

Блокові та рядкові елементи

Історично теги поділяли на блокові (div, p, section) і рядкові (span, a, strong). У специфікації HTML5 цей поділ замінено категоріями контенту, але на практиці різниця лишилася: блоковий елемент займає всю доступну ширину й починається з нового рядка, рядковий тече всередині тексту. Важливо пам’ятати правило вкладеності: рядковий елемент не може містити блоковий. Єдиний виняток — <a>, якому в HTML5 дозволили обгортати цілі блоки, чим ми й користуємося, коли вся картка товару має бути посиланням.

Семантична структура сторінки

До HTML5 типова сторінка складалася з вкладених один в одного <div> із класами header, menu, content, sidebar. Машина не знала, що ці класи означають, — для неї це були однакові безіменні коробки. Семантичні теги дали кожній частині сторінки власне ім’я.

Різниця між <article> і <section> збиває з пантелику найчастіше. Перевірка проста: якщо фрагмент можна вирізати зі сторінки й опублікувати окремо, і він не втратить сенс — це <article>. Якщо це просто змістова частина чогось більшого — <section>. Допис у блозі — article. Розділ «Характеристики» всередині опису товару — section.

Типова сторінка блогу розмічається так:

<body>
  <header>
    <a href="/">Логотип</a>
    <nav><a href="/blog/">Блог</a> <a href="/contacts/">Контакти</a></nav>
  </header>

  <main>
    <article>
      <h1>Заголовок статті</h1>
      <p>Текст статті…</p>
      <section>
        <h2>Розділ статті</h2>
        <p>…</p>
      </section>
      <footer>Автор, дата публікації</footer>
    </article>
  </main>

  <aside>Схожі записи</aside>

  <footer>© 2026</footer>
</body>

Виграш від такої розмітки не абстрактний. Скрінрідер дозволяє незрячому відвідувачу перестрибнути одразу до main, оминувши меню. Браузерний режим читання розпізнає article і показує лише текст. Пошуковий робот точніше розуміє, де основний вміст, а де обв’язка, що повторюється на всіх сторінках.

Текст: заголовки, абзаци та виділення

Текстові теги — ті, якими користуються щодня, і саме в них найчастіше плутають зовнішній вигляд зі змістом.

Різниця між <strong> і <b> — саме у змісті, а не в накресленні. «Увага: сервер перезавантажиться» — це strong, бо фраза важлива. Назва товару в описі, виділена жирним за друкарською традицією, — це b. Те саме з парою <em> і <i>: перший змінює зміст фрази, другий просто нахиляє шрифт.

Про заголовки є окреме правило, яке порушують постійно: рівні утворюють зміст документа, а не набір розмірів шрифту. Якщо після h2 йде h4, у структурі документа з’являється діра. Потрібен дрібніший шрифт — це завдання CSS, а не привід узяти тег рівнем нижче.

Списки

Списків у HTML три, і кожен розв’язує своє завдання.

<ul>                        <!-- маркований, порядок неважливий -->
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

<ol start="3" reversed>      <!-- нумерований, порядок важливий -->
  <li>Третій за ліком</li>
</ol>

<dl>                         <!-- список визначень -->
  <dt>HTML</dt>
  <dd>Мова розмітки документів</dd>
  <dt>CSS</dt>
  <dd>Мова опису зовнішнього вигляду</dd>
</dl>

У <ol> є корисні атрибути, про які забувають: start задає початок нумерації, reversed розвертає її, type змінює вигляд маркера на літери чи римські цифри. Список визначень <dl> чудово пасує для словників термінів, характеристик товару та блоків «питання — відповідь»: пари «термін — опис» машина читає як пов’язані, на відміну від двох сусідніх абзаців.

Меню сайту — це теж список. Набір посилань, просто розставлених через пробіл, скрінрідер прочитає як суцільний текст, а список оголосить: «навігація, 5 пунктів».

Посилання та навігація

Тег <a> — головний тег гіпертексту, і кілька його атрибутів варто знати напам’ять.

<a href="/blog/">Внутрішнє посилання</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Зовнішнє</a>
<a href="#section-2">Якір на цій же сторінці</a>
<a href="mailto:[email protected]">Лист</a>
<a href="tel:+380675024584">Зателефонувати</a>
<a href="/price.pdf" download>Завантажити прайс</a>

Зв’язка target="_blank" без rel="noopener" — стара діра в безпеці: відкрита сторінка отримує доступ до об’єкта window.opener і може підмінити вихідну вкладку. Сучасні браузери додають noopener самі, але покладатися на це в чужому середовищі не варто.

Атрибут rel відповідає і за SEO: rel="nofollow" каже пошуковику не передавати вагу за посиланням, rel="sponsored" позначає рекламне, rel="ugc" — посилання з користувацького контенту. Текст посилання при цьому має бути змістовним: «докладніше» і «тут» однаково марні і для пошуковика, і для людини, яка слухає сторінку через скрінрідер й отримує список посилань без навколишнього тексту.

Зображення, відео та аудіо

Картинка в HTML — це не лише <img>. Навколо неї вибудувано ціле сімейство тегів, яке розв’язує два завдання: підписати зображення й віддати браузеру відповідний за вагою файл.

<figure>
  <img src="/img/scheme.webp"
       alt="Схема структури HTML-документа"
       width="1200" height="630"
       loading="lazy" decoding="async">
  <figcaption>Дерево документа: один корінь і дві гілки</figcaption>
</figure>

Атрибут alt обов’язковий завжди. Він описує вміст картинки для тих, хто її не бачить, і показується замість зображення, якщо файл не завантажився. Для суто декоративної картинки пишуть порожній alt="" — тоді скрінрідер її пропустить, а відсутність атрибута змусить його зачитати ім’я файлу. Атрибути width і height потрібні не для розмірів, а щоб браузер заздалегідь зарезервував місце: без них сторінка смикається під час завантаження, і це прямо погіршує показник Cumulative Layout Shift у Core Web Vitals. loading="lazy" відкладає завантаження картинок за межами екрана.

Коли треба віддати різні файли різним екранам, підключають <picture>:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Опис">
</picture>

Браузер бере перший формат, який розуміє, і зупиняється. Старий браузер дійде до <img> й отримає JPEG. Той самий прийом з атрибутом media дозволяє показати на телефоні вертикальний кадр, а на десктопі — горизонтальний.

Автовідтворення відео працює лише у зв’язці autoplay muted playsinline — без muted мобільний браузер його заблокує. Для <iframe> завжди варто вказувати title: скрінрідер оголошує ним вміст фрейма, інакше відвідувач почує безіменну «вбудовану область».

Таблиці

Таблиці повернулися до вжитку після того, як їх перестали використовувати для верстки. Для справжніх табличних даних альтернативи їм немає, але розмічати їх треба повністю.

<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>10 ГБ</td><td>3 $</td></tr>
    <tr><th scope="row">Бізнес</th><td>50 ГБ</td><td>9 $</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Ціни вказано без ПДВ</td></tr>
  </tfoot>
</table>

Три речі відрізняють розмічену таблицю від набору комірок. <caption> дає їй назву, яку зачитують першою. <th> з атрибутом scope оголошує, що комірка — заголовок стовпця або рядка, і скрінрідер під час переходу комірками підказує: «Бізнес, Ціна, 9 доларів». Поділ на <thead>, <tbody> і <tfoot> дозволяє браузеру повторювати шапку під час друку довгої таблиці та прокручувати тіло окремо від заголовків.

На вузькому екрані широка таблиця — завжди проблема. Робочих рішення два: обгорнути її в контейнер з overflow-x: auto і дати прокрутку, або перебудувати рядки в картки через CSS, підставляючи заголовки стовпців із data-label. Обидва способи залишають розмітку коректною — ламає таблицю саме спроба втиснути її в ширину екрана зменшенням шрифту.

Форми та поля введення

Форми — найбільша група тегів і єдине місце, де HTML уміє не лише показувати, а й збирати дані.

<form action="/send/" method="post">
  <fieldset>
    <legend>Заявка</legend>

    <label for="name">Ім’я</label>
    <input type="text" id="name" name="name" required autocomplete="name">

    <label for="mail">Пошта</label>
    <input type="email" id="mail" name="email" required
           placeholder="[email protected]" autocomplete="email">

    <label for="plan">Тариф</label>
    <select id="plan" name="plan">
      <optgroup label="Хостинг">
        <option value="start">Старт</option>
        <option value="pro" selected>Бізнес</option>
      </optgroup>
    </select>

    <label for="msg">Повідомлення</label>
    <textarea id="msg" name="message" rows="5"></textarea>

    <button type="submit">Надіслати</button>
  </fieldset>
</form>

Зв’язка <label for> з id поля — не формальність. Вона збільшує область натискання (клік по підпису ставить курсор у поле), а скрінрідер завдяки їй знає, що саме запитують. Поле без підпису, де роль підпису грає placeholder, — поширена помилка: підказка зникає з першим же символом, і відвідувач перестає розуміти, що вводить.

Тип поля визначає і клавіатуру на телефоні, і вбудовану перевірку:

Валідація засобами HTML працює без жодного рядка JavaScript: required забороняє надсилання порожнього поля, minlength і maxlength обмежують довжину, pattern задає регулярний вираз, min і max — межі числа й дати. Це перша лінія, а не захист: перевірку на сервері вона не скасовує, бо будь-який запит можна надіслати в обхід форми.

Ще два теги цієї групи заслуговують на увагу. <datalist> дає полю автопідказки, залишаючи можливість увести своє значення. <output> показує результат обчислення — наприклад, суму замовлення, перераховану при зміні кількості.

Інтерактивні елементи без JavaScript

Частина поведінки, заради якої раніше підключали скрипти, у HTML5 вбудована.

<details>
  <summary>Що входить в обслуговування сайту?</summary>
  <p>Оновлення, резервні копії, моніторинг доступності.</p>
</details>

<dialog id="modal">
  <p>Заявку надіслано</p>
  <button onclick="modal.close()">Закрити</button>
</dialog>

<progress value="70" max="100">70%</progress>
<meter value="0.8" low="0.3" high="0.9">80%</meter>

<details> із <summary> — готовий акордеон: розкривається по кліку, працює з клавіатури, індексується пошуковиком. Блок «питання — відповідь» на цьому тезі не потребує жодного рядка JavaScript. <dialog> — модальне вікно з правильною поведінкою фокуса: метод showModal() замикає фокус усередині вікна й закриває його по Escape. <progress> показує хід процесу, <meter> — значення у відомому діапазоні, наприклад заповненість диска.

Службові теги в <head>

Ці теги відвідувач не бачить, але саме вони вирішують, як сторінка виглядає у видачі та в соцмережах.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Теги HTML5: довідник</title>
  <meta name="description" content="Усі актуальні теги HTML5 з прикладами">
  <link rel="canonical" href="https://example.com/html5/">
  <link rel="alternate" hreflang="uk" href="https://example.com/uk/html5/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/style.css">
  <meta property="og:title" content="Теги HTML5: довідник">
  <meta property="og:image" content="https://example.com/img/cover.webp">
  <script src="/app.js" defer></script>
</head>

<title> — найвагоміший текстовий сигнал для пошуковика і те, що відвідувач бачить у вкладці. <link rel="canonical"> вказує головну адресу сторінки, коли до неї ведуть кілька URL із параметрами. hreflang пов’язує мовні версії між собою — для багатомовного сайту це обов’язкова розмітка, без неї пошуковик показує не ту версію. Відкриті графи og: визначають, як посилання виглядає в месенджері та соцмережі.

Про підключення скриптів варто пам’ятати одне: <script> без атрибутів зупиняє розбір документа, доки файл не завантажиться й не виконається. Атрибут defer відкладає виконання до кінця розбору й зберігає порядок файлів, async виконує одразу після завантаження й порядку не гарантує. Для лічильників пасує async, для коду застосунку — defer.

Застарілі теги і чим їх замінити

Ці теги браузери все ще показують, але специфікація їх вилучила: частина відповідала за оформлення, яке давно перейшло в CSS, частина просто шкодила.

Окрема історія — <hgroup>. Його вилучили зі специфікації, потім повернули з іншим змістом, і сьогодні для зв’язки «заголовок плюс підзаголовок» достатньо звичайного <p> поруч із заголовком.

Часті помилки розмітки

• Кілька <h1> на сторінці. Заголовок першого рівня описує сторінку цілком, і він один. Решта — рівні нижче.
• Блок усередині абзацу. <div> усередині <p> браузер мовчки виправляє, закриваючи абзац раніше, — і верстка їде без видимої причини.
• <br> замість відступів. Три поспіль перенесення рядка — це спроба зробити розміткою те, що робиться стилями: margin.
• Картинка без alt. Втрачаються і доступність, і пошуковий трафік із картинок.
• Кнопка, зроблена з <div>. Такій «кнопці» потрібні обробник клавіатури, role і tabindex, тоді як <button> вміє це одразу.
• Посилання без href. Елемент випадає з навігації з клавіатури. Немає адреси — використовуйте <button>.
• Таблиця для верстки. На мобільному така розмітка не перебудовується, а скрінрідер зачитує її як таблицю даних.
• <div> замість семантики. Сторінка з самих лише div працює, але позбавляється всього, що дає розмітка змісту: швидкої навігації, режиму читання, зрозумілої структури для пошуковика.

Як перевірити розмітку

Три інструменти покривають майже всі помилки. Валідатор W3C знаходить незакриті теги, хибну вкладеність і неіснуючі атрибути. Вкладка Accessibility в інструментах розробника браузера показує дерево доступності — те, що «бачить» скрінрідер. Lighthouse у Chrome перевіряє семантику разом зі швидкістю й видає список конкретних зауважень.

Окремий прийом для самоперевірки: відкрийте сторінку з вимкненим CSS. Якщо без стилів документ читається згори вниз як осмислений текст із заголовками, списками та підписами до картинок — розмітку зроблено правильно. Якщо перетворюється на кашу, річ не в стилях, а в тегах.

Коротко про головне

Якщо тримати в голові всього кілька правил, решта виводиться з них сама:

• Тег обирають за змістом, а не за виглядом. Зовнішній вигляд будь-якого елемента змінюється одним рядком CSS, а зміст, закладений тегом, читають машини — і змінити його стилями неможливо.
• Структура сторінки — це header, nav, main, article, section, aside, footer. <div> лишається для випадків, коли жоден із них не підходить, а не навпаки.
• Заголовки утворюють зміст документа. Один h1, далі по порядку, без пропусків рівнів.
• Три атрибути, про які забувають найчастіше: alt у картинки, for у підпису поля та title у фрейма. Кожен із них — пара хвилин роботи й помітна різниця в доступності.
• Форма вміє перевіряти себе сама. Правильний type плюс required і pattern закривають більшу частину валідації без JavaScript — але не скасовують перевірку на сервері.
• Усе, що про оформлення, живе в CSS. Саме тому зі специфікації пішли font, center та їхні сусіди.

Хороша розмітка майже непомітна: сайт просто працює — швидко відкривається, нормально читається на телефоні, правильно виглядає в пошуковій видачі та в месенджері, доступний людям зі скрінрідером. Погану помічають одразу, але лікують зазвичай не там, де болить: правлять стилі, підключають скрипти, ставлять плагіни — хоча причина в двох-трьох хибно обраних тегах.

Перевірте свою сторінку просто зараз: відкрийте вихідний код і подивіться, скільки в ньому <div> і скільки тегів зі змістом. Якщо перших утричі більше — починайте з цієї статті згори, за розділами. Переписувати весь сайт не доведеться: зазвичай достатньо перейменувати кілька контейнерів і розставити забуті атрибути.