Що таке семантика в HTML? Це спосіб позначати зміст сторінки так, щоб код описував не лише вигляд, а й зміст елементів. Інакше кажучи, браузер, пошукова система та скрінрідер мають розуміти, де заголовок, де навігація, де основний текст і де допоміжний блок.
Семантика в HTML простими словами
У звичайному HTML можна розмітити майже все за допомогою універсального контейнера div. Але такий підхід не пояснює, що саме знаходиться всередині. Семантичні теги дають контекст: header — це шапка, nav — навігація, main — основний вміст, article — окрема публікація, footer — підвал сторінки.
Це особливо важливо для складних сторінок, де є меню, картки, статті, сайдбар і форми. Без семантики код працює, але стає менш зрозумілим для людей і машин.
Навіщо семантика потрібна на практиці
- Покращує доступність. Допоміжні технології краще орієнтуються в структурі сторінки.
- Полегшує SEO-обробку. Пошуковим системам простіше визначити головний контент і його ієрархію.
- Підвищує читабельність коду. Розробнику легше підтримувати та змінювати розмітку.
- Зменшує помилки в структурі. Менше шансів переплутати декоративний блок із важливим змістом.
На практиці це означає, що правильно побудована сторінка швидше масштабується і рідше створює проблеми під час редизайну чи адаптації під мобільні пристрої.
Які теги вважаються семантичними
Найчастіше в сучасній верстці використовують теги, які несуть змістове навантаження:
- header — верхня частина сторінки або секції;
- nav — блок навігації;
- main — основний унікальний контент;
- section — тематичний розділ;
- article — самостійний матеріал;
- aside — додатковий або боковий контент;
- footer — нижня частина сторінки або секції;
- figure і figcaption — зображення та підпис до нього.
Також важливу роль відіграють заголовки h2–h6, бо вони формують логічну структуру тексту.
Семантика проти div і span
div і span не є “поганими” тегами. Їх використовують, коли немає кращого змістового варіанту або коли потрібен лише технічний контейнер. Проблема виникає тоді, коли ними замінюють усю структуру.
Наприклад, якщо заголовок сайту, меню та основна стаття всі зібрані в безіменні div, код втрачає сенс. Семантичні теги роблять розмітку зрозумілішою без додаткових пояснень.
Як почати використовувати семантику правильно
Почніть із простого правила: кожен елемент сторінки має бути позначений відповідно до своєї ролі. Основний вміст помістіть у main, навігацію — у nav, окрему новину або статтю — в article, а тематичні частини — у section.
Далі перевірте структуру заголовків. Один блок має один логічний h1, а наступні розділи — послідовні h2 і h3. Не варто стрибати через рівні без причини.
Якщо коротко, семантика в HTML — це не про красу коду, а про його зміст. Саме вона допомагає створювати сторінки, які краще читаються, доступніші для людей і зрозуміліші для пошукових систем.
