Семантичний HTML

HTML та CSS~3 хв читання

Семантичний HTML використовує теги, що описують значення контенту (<article>, <nav>, <main>) замість загальних контейнерів (<div>, <span>), щоб браузери, програми читання з екрана та пошукові системи розуміли, що саме являє собою кожна частина сторінки.

Теорія

TL;DR

<header> каже 'це header'; <div class="header"> каже 'виглядає як header' - різниця принципова
Семантичні теги автоматично передають ARIA-ролі допоміжним технологіям без додаткових атрибутів
<nav> стає 'navigation landmark', <main> стає 'main landmark' без жодного рядка JavaScript
Семантичні теги - для структури контенту; <div> - тільки для стилізації або JS-контейнерів

Швидкий приклад

html

<!-- Несемантично: screen reader бачить "Div. Div. Div." -->
<div class="header">Лого і навігація</div>
<div class="main-content">Тіло статті</div>
<div class="footer">Копірайт</div>

<!-- Семантично: screen reader оголошує "Banner region. Navigation. Main." -->
<header>
  <img src="logo.png" alt="Логотип компанії">
  <nav><!-- навігаційні посилання --></nav>
</header>
<main>
  <article>Контент статті</article>
</main>
<footer>© 2026 Компанія</footer>

Візуально однаково. Але значення для всього, що читає HTML, - повністю різне.

Головна різниця

<div class="nav"> і <nav> виглядають у браузері однаково. Але <nav> автоматично отримує role="navigation" в accessibility tree під час парсингу DOM. Користувач screen reader може одразу перейти до навігації. З <div> потрібно вручну додавати role="navigation" - і цей атрибут стабільно зникає під час рефакторингу.

Коли використовувати

Сторінка має шапку, навігацію, основний контент і підвал - бери <header>, <nav>, <main>, <footer>
Пишеш блог-пост або новину - обгортай у <article>, для тематичних блоків із заголовками використовуй <section>
Бічна панель із пов'язаними посиланнями - <aside>
Контейнер для layout або JS-логіки без змістового значення - <div> підійде

Як браузер це обробляє

Під час парсингу HTML рушії Blink (Chrome) і Gecko (Firefox) відображають семантичні елементи прямо в accessibility tree. <header> на верхньому рівні автоматично отримує role="banner". <main> отримує role="main". Screen reader-и звертаються до цього дерева через платформові API (MSAA на Windows, AXAPI на macOS) без жодного JavaScript. Це відбувається на етапі парсингу, не після запуску скриптів.

Типові помилки

<section> без заголовка

html

<!-- Неправильно: screen reader оголошує "section" без підпису -->
<section>Просто абзац тексту.</section>

<!-- Правильно: section означає тематичну групу і потребує заголовка -->
<section>
  <h2>Чому доступність важлива</h2>
  <p>...</p>
</section>

Якщо заголовка немає - використовуй <div>.

<a> стилізований як кнопка

html

<!-- Неправильно: клавіатурні користувачі натискають Space на кнопці;
     посилання на Space не реагує -->
<a href="#" class="btn">Надіслати</a>

<!-- Правильно: дії - це <button>, навігація - це <a> -->
<button type="submit">Надіслати</button>

Користувачі screen reader очікують Enter для посилань і Enter/Space для кнопок. Якщо змішувати - клавіатурна навігація ламається.

Кілька вкладених <main>

html

<!-- Неправильно: AT оголошує кілька "main" landmark - користувачі губляться -->
<main>
  <main>Контент</main>
</main>

Один <main> на сторінку. Для підсекцій всередині - <section>.

role="main" на <div> замість <main>

html

<!-- Сьогодні працює, але зникне під час чергового прибирання коду -->
<div role="main" class="content">...</div>

<!-- Постійне рішення. Сам елемент ніхто не видалить. -->
<main class="content">...</main>

Де зустрічається в реальних проектах

Next.js App Router: <header>, <main>, <nav> у layout.tsx, обгортають кожну сторінку
Gatsby з MDX: кожен пост автоматично обгортається в <article>
WordPress block editor: виводить <figure> і <figcaption> для зображень за замовчуванням
Tailwind UI: семантична основа плюс utility-класи (<nav class="flex space-x-4">)

Питання для поглиблення

Q: Яка різниця між <section> і <div>?
A: <section> представляє тематичну групу і має мати заголовок. <div> - суто презентаційний, без значення. Якщо не можеш дати секції заголовок - бери <div>.

Q: Можна використовувати <header> всередині <article>?
A: Так. <header> всередині <article> стає заголовком цієї статті, а не шапкою сайту. Тільки <header> на верхньому рівні отримує role="banner". Вкладені - просто групують вміст.

Q: Чи впливає семантичний HTML на SEO?
A: Google розглядає семантичні елементи як структурні сигнали. Контент в <article> індексується інакше, ніж контент у звичайному <div>. <header> і <footer> допомагають краулеру зрозуміти структуру сторінки, що впливає на відображення в результатах пошуку.

Q: Користувач screen reader потрапляє на <nav> з 50 посиланнями. Що відбувається?
A: Деякі screen reader-и (наприклад VoiceOver) дозволяють пропускати landmark-регіони. Інші змушують табуляцією проходити кожне посилання. Рішення: додай aria-label="Основна навігація" щоб розрізняти кілька <nav> на сторінці, і розмісти посилання 'Перейти до контенту' на самому початку сторінки.

Приклади

Структура блог-поста

html

<article>
  <header>
    <h1>Семантичний HTML: навіщо це потрібно</h1>
    <!-- <time> повідомляє дату публікації не тільки людям, але й машинам -->
    <time datetime="2026-04-14">14 квітня 2026</time>
  </header>

  <section>
    <h2>Чому це важливо</h2>
    <p>Screen reader-и використовують ці елементи для побудови навігаційних меню.</p>
  </section>

  <section>
    <h2>Основні теги</h2>
    <p>Починай зі структурних: header, main, footer, nav, article, aside.</p>
  </section>
</article>

Screen reader читає це так: 'Article. Heading level 1. Семантичний HTML: навіщо це потрібно. 14 квітня 2026.' Без семантики: 'Div. Div. Div.'

Повна структура сторінки з landmark-елементами

html

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>ITLead - Підготовка до співбесід</title>
</head>
<body>

  <header>
    <a href="/">
      <img src="logo.png" alt="Логотип ITLead">
    </a>
    <nav aria-label="Основна навігація">
      <ul>
        <li><a href="/questions">Питання</a></li>
        <li><a href="/topics">Теми</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Що таке семантичний HTML?</h1>
      <p>Контент тут...</p>
    </article>

    <aside aria-label="Пов'язані теми">
      <h2>Дивись також</h2>
      <ul>
        <li><a href="/questions/aria">ARIA-ролі</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 ITLead</p>
  </footer>

</body>
</html>

Кожна велика область тут - це landmark. Користувач screen reader може відкрити меню landmark-ів і перейти прямо до 'Основна навігація', 'Main', 'Complementary' або 'Content info' - не прочитавши жодного слова контенту.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?