Модуль 2 · Урок 5
Документ, landmarks і heading outline
Semantic HTML описує purpose і relationships, а не бажаний розмір або колір. Почніть із коректного document shell, потім позначте регіони й лише після цього будуйте логічну heading hierarchy.
Document shellLandmarksSectionsHeadings
Мінімальний document shell
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BookFlow — добірка книг</title>
</head>
<body>...</body>
</html>title описує document у вкладці й результатах пошуку; видимий page heading живе у body. Атрибут lang задає основну мову content.
Обирайте елемент за purpose
| Елемент | Коли доречний | Типова помилка |
|---|---|---|
header | Вступна частина page або section | Вважати, що він завжди лише один |
nav | Важлива колекція navigation links | Обгортати кожні два links |
main | Унікальний основний content document | Кілька видимих main regions |
article | Самодостатній матеріал, що має сенс окремо | Використовувати як generic card |
section | Тематичний розділ, зазвичай із heading | Застосовувати замість кожного div |
aside | Дотичний, але не основний content | Обирати лише через праву колонку |
Heading hierarchy — карта змісту
Один page topic
h1 називає головну тему сторінки.Peer sectionsРозділи одного рівня мають однаковий heading level.
Nested subsectionДочірній heading слідує структурі content, не font size.
Не обирайте h4, бо він «менший». Візуальний масштаб — відповідальність CSS. Якщо блок не потребує власного heading і не має окремого purpose, neutral div може бути правильним.
Практика
- Намалюйте content outline starter page без HTML.
- Заповніть
landmark-map.csvіheading-outline.csv. - Замініть лише ті neutral containers, для яких можете назвати semantic purpose.
- Перевірте один
main, meaningful headings та navigation labels у DOM.
Офіційні джерела
Практична перевірка · урок 5 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.