Semantic HTML (семантична розмітка) — це підхід до верстки, за якого теги описують сенс вмісту, а не лише його вигляд. Замість універсальних <div> використовують значущі елементи: <header>, <nav>, <article>, <footer>. Так і браузер, і пошуковик, і скрінрідер розуміють структуру сторінки.
Простими словами: звичайний <div> — це безлика коробка «щось тут є». Семантичний тег — коробка з підписом: «це шапка», «це меню», «це стаття». Роботу одразу видно, що всередині.
Що таке Semantic HTML і навіщо він потрібен
До HTML5 сторінки будували переважно з <div> та <span> — тегів без жодного змісту. HTML5, що став рекомендацією W3C у 2014 році, додав семантичні елементи: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Кожен явно каже, яку роль відіграє блок.
Навіщо це для SEO і не тільки. Пошуковик краще розуміє, де головний контент, а де навігація чи «підвал», — і точніше оцінює сторінку. А ще семантична розмітка — фундамент доступності: скрінрідери незрячих користувачів орієнтуються саме за цими тегами.
Як використовується
<header>— шапка сторінки або секції.<nav>— блок навігації, меню.<main>— основний унікальний контент (один на сторінку).<article>— самодостатній матеріал: стаття, картка товару.<aside>— бічний, додатковий контент.<footer>— «підвал» із контактами й копірайтом.
Синтаксис і приклад коду
Погано (несемантично):
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>Добре (семантично):
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
</main>
<footer>...</footer>Приклад
Стаття блогу, загорнута в <article> із заголовком <h1> всередині, дає Google чіткий сигнал: ось цілісний матеріал. У поєднанні з мікророзміткою це підвищує шанси на розширені сніппети — тоді як «стіна» з <div> лишає пошуковик здогадуватися.
Часто плутають з…
- Звичайний HTML на
<div>— візуально сторінка та сама, але сенсу в коді немає. - Schema.org / мікророзмітка — це додатковий шар даних для пошуковиків; семантичні теги — базова структура самого HTML.
Питання та відповіді
Чи впливає Semantic HTML на SEO?
Так, опосередковано: він допомагає пошуковику зрозуміти структуру й головний контент сторінки. Це не «фактор №1», але частина здорової технічної бази.
Чим семантичні теги кращі за div?
Вони несуть сенс: браузер, пошуковик і скрінрідер одразу бачать роль блоку. Код стає зрозумілішим і доступнішим.
Які основні семантичні теги HTML5?
header, nav, main, article, section, aside, footer — усі вони з’явилися в HTML5 (рекомендація W3C 2014 року).
Верстка сайту — суцільні div без структури? Наведемо лад у коді — виправлення помилок на сайті та SEO-аудит.
Схожі терміни: HTML, Доступність, Semantic SEO, Schema.org.
