Модуль 1 · урок 1 з 14

Семантика документа

Семантичний тег — це тег, який каже що це таке, а не як воно виглядає. <div> не каже нічого: це просто коробка. <nav> каже «тут навігація», і цим користуються і браузер, і скрінрідер, і пошуковик, і твій колега, який відкрив файл уперше.

Каркас сторінки

П'ять тегів-орієнтирів (landmarks) утворюють каркас: за ними скрінрідер дозволяє стрибати по сторінці, а людина розуміє структуру, не читаючи класів.

Тег	Коли він	Типова помилка
`<header>`	Шапка сторінки або шапка секції/картки	Думати, що він тільки один — їх може бути багато
`<nav>`	Основна навігація, хлібні крихти	Обгортати в nav будь-який список посилань
`<main>`	Головний зміст екрана	Кілька `main` на сторінці — так не можна
`<aside>`	Те, що поруч зі змістом: фільтри, підказки	Класти в aside головний контент, бо «він збоку»
`<section>`	Смисловий блок, у якого є заголовок	Використовувати замість div для відступів
`<article>`	Шматок, який має сенс окремо: картка, коментар, пост	Плутати з section — перевір питанням «чи має воно сенс без сторінки?»
`<footer>`	Підвал сторінки або блоку	—

Правило, яке знімає 90% сумнівів

Якщо блок має власний заголовок і його можна назвати одним іменником — це <section>. Якщо він при цьому має сенс, вирваний зі сторінки (картка товару, коментар) — це <article>. Якщо він існує тільки заради відступу чи вирівнювання — це <div>, і це нормально.

Заголовки — це зміст, а не розмір

Ієрархія h1…h6 — це зміст документа. Скрінрідер уміє показати список заголовків, і по ньому людина розуміє структуру сторінки за секунди. Тому:

Один h1 на екран — назва того, що людина зараз бачить.
Рівні не перестрибувати: після h2 йде h3, а не h5, «бо дрібніший».
Розмір задає CSS, а не вибір тега. Потрібен маленький заголовок — h2 з класом.

Так робить більшість

<div class="page">
  <div class="top">
    <div class="menu">…</div>
  </div>
  <div class="content">
    <div class="title">Задачі</div>
    <div class="card">…</div>
  </div>
</div>

Так просить лід

<header class="app-header">
  <nav class="app-nav">…</nav>
</header>

<main class="content">
  <h1>Задачі</h1>
  <article class="card">…</article>
</main>

Різниця не косметична. У правому варіанті на два рівні вкладеності менше, теги самі пояснюють структуру, заголовок став заголовком — і все це без жодного додаткового рядка CSS.

≈ 35 хв · +25 XP за урок