Семантичні теги HTML5
Навчись описувати структуру сторінки правильно — для SEO і доступності
Семантика — це як архітектурний план
Уяви будівлю: вхід, хол, кімнати, кухня, вихід. Якби кожна кімната мала підпис — архітектор і всі хто читає план одразу розуміють що де. HTML5 семантичні теги — це підписи для ділянок сторінки. Замість безлічі безіменних div-ів — зрозумілі назви: header, nav, main, footer.
Семантичні теги vs div
До HTML5 всі блоки робили через <div> — безіменний контейнер. Це погано: ні браузер, ні Google, ні скрін-рідер не розуміє що в цьому div-і.
HTML5 ввів теги зі змістом:
| Тег | Призначення |
|---|---|
<header> | Шапка сторінки або секції (логотип, навігація) |
<nav> | Блок навігації (меню, хлібні крихти) |
<main> | Головний контент сторінки (один на сторінці) |
<section> | Тематична секція з заголовком |
<article> | Самостійний контент (стаття, пост, урок) |
<aside> | Бічна панель, додатковий контент |
<footer> | Нижній колонтитул (копірайт, посилання) |
Чому важливо:
- Google краще індексує сторінку (SEO)
- Скрін-рідери для незрячих правильно озвучують
- Колеги в команді швидше розуміють код
Ця структура — стандарт для будь-якого сучасного сайту. Вивчи її напам'ять.
Запам'ятай головне правило: один <main> на сторінку, <header> і <footer> можуть бути у кожній <section>, <article> описує самостійний контент (блог-пост, товар, урок).