Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Семантичний HTML». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Семантичний 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

<div class="header">Лого і навігація</div>
<div class="main-content">Тіло статті</div>
<div class="footer">Копірайт</div>

<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

<section>Просто абзац тексту.</section>

<section>
  <h2>Чому доступність важлива</h2>
  <p>...</p>
</section>
```

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

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

```html

<a href="#" class="btn">Надіслати</a>

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

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

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

```html

<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 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>

</body>
</html>
```

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати848 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.