Семантичні елементи HTML5 пояснюють роль частин сторінки браузерам, пошуковим системам і допоміжним технологіям. Вони не замінюють зміст, але роблять структуру зрозумілішою.
Навіщо потрібна семантика
Зрозуміла розмітка допомагає підтримувати код, будувати логічну ієрархію заголовків і надавати точніші орієнтири користувачам скринрідерів.
Основні елементи HTML5
header містить вступну частину, nav — основну навігацію, main — унікальний вміст сторінки, article — самостійний матеріал, section — тематичний розділ, aside — додатковий контент, а footer — завершальну інформацію.
Базова структура сторінки
На сторінці зазвичай має бути один main. Розділи з окремою темою варто позначати заголовками H2–H3, а теги обирати за змістом, а не за бажаним зовнішнім виглядом.
Доступність і пошук
Семантика працює разом із послідовною ієрархією заголовків, описовими посиланнями, альтернативним текстом зображень і коректними атрибутами мови документа.
Типові помилки
Не використовуйте section як універсальний контейнер, не створюйте порожні заголовки і не замінюйте кнопки або посилання звичайними div. Перед публікацією перевіряйте документ валідатором і тестуйте навігацію з клавіатури.