Що таке семантична верстка та навіщо потрібна

Привіт:) Більше десятка років тому зовнішній вигляд веб-сайтів верстали як було зручно — таблицями, div-ами, span-ами і зовсім не задумувалися про доступність. Але з розвитком HTML з'явилися нові елементи, які дозволяють описувати не тільки зовнішню структуру сторінки, а й призначення її окремих частин.

Саме так з'явилося поняття семантичної верстки.

Семантична верстка — це підхід до створення HTML-розмітки, за якого елементи вибираються відповідно до їхнього змісту та призначення, а не тільки для того, щоб отримати потрібний зовнішній вигляд.

Наприклад:

<div class="navigation">
    <a href="/">Головна</a>
    <a href="/blog/">Блог</a>
    <a href="/contacts/">Контакти</a>
</div>

технічно працює, але HTML не повідомляє явно, що цей блок є навігацією.

Семантичніша версія:

<nav>
    <a href="/">Головна</a>
    <a href="/blog/">Блог</a>
    <a href="/contacts/">Контакти</a>
</nav>

Тепер призначення блоку зрозуміле не тільки людині, яка читає код, а й браузеру, допоміжним технологіям та іншим інструментам, які аналізують HTML.

Уявіть собі книгу із заголовками, розділами, абзацами, примітками та змістом. Навряд чи ви захотіли б, щоб усі ці елементи були просто набором однакових блоків без будь-якої структури.

Те саме стосується HTML-документа.

Чому семантика важлива

Семантична HTML-розмітка потрібна не для краси коду. Вона має цілком практичні переваги.

1. Доступність

Одна з головних причин використовувати семантичні елементи — доступність веб-сайту.

Зрячий користувач може подивитися на сторінку та приблизно одразу зрозуміти її структуру:

• де шапка;
• де меню;
• де основний текст;
• де стаття;
• де бічна панель;
• де підвал.

Користувач, який працює зі скринридером, не обов'язково бачить цю структуру візуально.

Скринридер аналізує HTML-документ і використовує його семантику для навігації.

Наприклад:

<nav>
    ...
</nav>

<main>
    ...
</main>

<aside>
    ...
</aside>

набагато краще описує структуру сторінки, ніж:

<div class="menu">
    ...
</div>

<div class="content">
    ...
</div>

<div class="sidebar">
    ...
</div>

Семантичні елементи створюють зрозумілі орієнтири для допоміжних технологій.

Особливо важливими є:

• заголовки <h1>–<h6>;
• <nav>;
• <main>;
• <article>;
• <section>;
• <aside>;
• правильні <form> та <label>;
• семантичні кнопки;
• списки;
• таблиці;
• підписи до зображень.

2. Краща структура документа

Семантичний HTML легше читати та підтримувати.

Порівняйте:

<div class="header">
    <div class="menu">
        ...
    </div>
</div>

<div class="content">
    <div class="post">
        ...
    </div>
</div>

<div class="footer">
    ...
</div>

і:

<header>
    <nav>
        ...
    </nav>
</header>

<main>
    <article>
        ...
    </article>
</main>

<footer>
    ... 
</footer>

Другий варіант фактично пояснює сам себе.

Навіть якщо розробник відкриє цей код через кілька місяців, структура сторінки буде зрозумілою без необхідності вивчати всі CSS-класи.

3. Зручніша робота з допоміжними технологіями

Семантика дозволяє програмам визначати призначення елементів без необхідності аналізувати назви CSS-класів.

Наприклад:

<nav>

має визначене призначення.

А:

<div class="navigation">

є просто <div>. Назва класу сама по собі не є стандартною семантикою HTML.

Це особливо важливо для користувачів скринридерів та інших допоміжних технологій.

4. Зручніша підтримка коду

Хороша семантична структура допомагає не тільки користувачам, а й розробникам.

Наприклад:

<main>
    <section>
        <h2>Наші послуги</h2>

        <article>
            <h3>Розробка сайтів</h3>
            ...
        </article>

        <article>
            <h3>SEO-оптимізація</h3>
            ...
        </article>
    </section>
</main>

За структурою одразу зрозуміло, що відбувається на сторінці.

Семантична верстка та доступність

Семантика є важливою складовою доступного HTML, але сама по собі не робить сайт автоматично доступним.

Наприклад:

<button>Відправити</button>

краще за:

<div class="button">Відправити</div>

тому що <button> є справжнім інтерактивним елементом.

Браузер знає, що це кнопка, а клавіатура та допоміжні технології можуть взаємодіяти з нею відповідним чином.

Якщо ж зробити кнопку через <div>, розробнику доведеться самостійно відтворювати частину поведінки справжньої кнопки за допомогою JavaScript та ARIA.

Тому правило просте:

Якщо HTML уже має елемент для потрібної дії — краще використовувати його, а не імітувати цей елемент через <div>.

Це називається використанням нативної семантики HTML.

Семантична верстка та SEO

Семантична розмітка часто пов'язується з SEO, але тут важливо не перебільшувати її вплив.

Сам факт використання:

<header>
<main>
<section>
<article>
<footer>

не означає автоматичного підвищення позицій сторінки в Google.

Пошукові системи використовують велику кількість сигналів для розуміння та оцінювання сторінок.

Однак правильна HTML-структура допомагає чіткіше описати документ, його заголовки, списки, таблиці, основний контент, навігацію та інші елементи.

Особливо важливими для пошукової оптимізації є:

• логічна структура заголовків;
• якісний текст;
• правильна структура контенту;
• коректні посилання;
• доступність;
• атрибути зображень;
• структуровані дані там, де вони доречні;
• зрозуміла структура сторінки.

Тому правильніше говорити не "семантика підвищує позиції", а:

семантична HTML-структура допомагає правильно описувати документ і є частиною якісної технічної реалізації сайту.

Семантика та читабельність коду

Ще одна важлива перевага — код стає зрозумілішим.

Наприклад:

<div class="post">
    <div class="post-title">
        <div class="title">Моя стаття</div>
    </div>

    <div class="post-content">
        ...
    </div>
</div>

Зрозуміти структуру можна, але для цього потрібно дивитися на класи.

Семантичний варіант:

<article>
    <h2>Моя стаття</h2>

    <div class="post-content">
        ...
    </div>
</article>

Тут роль основних елементів зрозуміла без CSS.

Основні семантичні теги HTML

У HTML є багато семантичних елементів. Вони призначені для різних типів інформації.

Серед найбільш важливих:

• <header>;
• <nav>;
• <main>;
• <section>;
• <article>;
• <aside>;
• <footer>;
• <h1>–<h6>;
• <p>;
• <ul>, <ol>, <li>;
• <figure>;
• <figcaption>;
• <time>;
• <address>;
• <blockquote>;
• <details>;
• <summary>;
• <strong>;
• <em>;
• <mark>;
• <button>;
• <form>;
• <label>;
• <fieldset>;
• <table> та пов'язані з нею елементи.

Розглянемо основні з них докладніше.

<header>

<header> позначає вступну частину сторінки або окремого структурного розділу.

Найчастіше у ньому знаходяться:

• логотип;
• заголовок;
• навігація;
• пошук;
• короткий опис;
• інші вступні елементи.

Наприклад:

<header>
    <a href="/" class="logo">My Site</a>

    <nav>
        <a href="/about/">Про нас</a>
        <a href="/blog/">Блог</a>
        <a href="/contacts/">Контакти</a>
    </nav>
</header>

Важливо: <header> — це не обов'язково тільки верхня частина всього сайту.

Він також може знаходитися всередині <article>:

<article>
    <header>
        <h2>Назва статті</h2>
        <time datetime="2026-09-23">23 вересня 2026</time>
    </header>

    <p>Текст статті...</p>
</article>

<nav>

<nav> використовується для окремого блоку навігації.

Наприклад:

<nav>
    <a href="/">Головна</a>
    <a href="/services/">Послуги</a>
    <a href="/blog/">Блог</a>
    <a href="/contacts/">Контакти</a>
</nav>

Навігація не обов'язково повинна бути списком:

<nav>
    <a href="/">Головна</a>
    <a href="/blog/">Блог</a>
</nav>

так само є коректною.

При цьому не потрібно обертати в <nav> абсолютно кожну групу посилань.

Наприклад, список посилань у тексті статті не обов'язково є навігаційним блоком.

<main>

<main> містить основний унікальний контент документа.

На сторінці зазвичай використовується один <main>.

Наприклад:

<header>
    ...
</header>

<main>
    <h1>Як створити сайт</h1>
    <p>Основний текст сторінки...</p>
</main>

<footer>
    ...
</footer>

Повторювані елементи сайту, такі як основне меню або стандартний футер, не повинні бути частиною основного змісту <main>.

<section>

<section> позначає тематично пов'язаний розділ документа.

Наприклад:

<section>
    <h2>Наші послуги</h2>

    <p>Ми займаємося розробкою сайтів.</p>
</section>

Як правило, секція має власний заголовок.

Якщо блок потрібен виключно для стилізації або групування елементів і не має окремого змістового значення, часто краще використовувати <div>.

Наприклад:

<div class="container">
    ...
</div>

Тут <section> не обов'язково потрібен.

<article>

<article> використовується для самостійної одиниці контенту, яку потенційно можна перенести або використати окремо від решти сторінки.

Наприклад:

• стаття;
• новина;
• запис блогу;
• коментар;
• відгук;
• форумне повідомлення;
• картка окремого матеріалу.

Приклад:

<article>
    <h2>Що таке WordPress</h2>

    <p>
        WordPress — популярна система керування контентом.
    </p>
</article>

Окремі <article> можуть бути вкладені один в один, якщо між ними існує відповідний змістовий зв'язок.

Наприклад, стаття може містити коментарі:

<article>
    <h1>Моя стаття</h1>

    <p>Текст...</p>

    <section>
        <h2>Коментарі</h2>

        <article>
            <h3>Коментар користувача</h3>
            <p>Цікавий матеріал.</p>
        </article>
    </section>
</article>

<aside>

<aside> позначає додатковий контент, який опосередковано пов'язаний з основним вмістом.

Наприклад:

<main>
    <article>
        <h1>Що таке WordPress</h1>
        <p>Основний текст...</p>
    </article>

    <aside>
        <h2>Корисні матеріали</h2>
        <ul>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">SEO</a></li>
        </ul>
    </aside>
</main>

Важливо виправити поширену помилку: <aside> цілком може знаходитися всередині <main>.

Більше того, для бічної панелі сторінки це цілком природне рішення.

Наприклад:

<main>
    <article>
        ...
    </article>

    <aside>
        ...
    </aside>
</main>

<aside> також може використовуватися всередині <article>, якщо додаткова інформація стосується саме цієї статті.

<footer>

<footer> позначає заключну частину сторінки або окремого структурного розділу.

Найчастіше у футері сайту знаходяться:

• копірайт;
• контактна інформація;
• додаткові посилання;
• інформація про автора;
• посилання на політику конфіденційності;
• навігація.

Наприклад:

<footer>
    <p>© 2026 My Site</p>
</footer>

Але <footer> також може бути частиною окремої статті:

<article>
    <h2>Назва статті</h2>

    <p>Текст...</p>

    <footer>
        <p>Автор: Михайло Петров</p>
    </footer>
</article>

Тому <footer> — це не просто "нижня частина екрану".

<h1>–<h6>

Заголовки формують ієрархію документа.

<h1>Основний заголовок</h1>

<h2>Розділ</h2>

<h3>Підрозділ</h3>

<h2>Інший розділ</h2>

Заголовки важливі як для читачів, так і для допоміжних технологій.

Скринридери можуть дозволяти користувачу швидко переходити між заголовками.

Не варто вибирати <h2> або <h3> лише через розмір шрифту.

Розмір визначається CSS:

h2 {
    font-size: 32px;
}

Рівень заголовка визначається його місцем у структурі документа.

<time>

<time> використовується для дат і часу.

Наприклад:

<time datetime="2026-09-23">
    23 вересня 2026 року
</time>

Можна вказати й дату разом із часом:

<time datetime="2026-09-23T10:30">
    23 вересня о 10:30
</time>

Атрибут datetime дозволяє програмам отримати машинно зрозуміле представлення дати.

<figure> та <figcaption>

<figure> використовується для самостійного контенту, який часто є ілюстрацією, схемою, фотографією, графіком або прикладом коду.

Разом із ним можна використовувати <figcaption>:

<figure>
    <img src="semantic-html.jpg" alt="Приклад семантичної HTML-структури">
    <figcaption>
        Приклад структури семантичної HTML-сторінки.
    </figcaption>
</figure>

Це краще описує зв'язок між зображенням та його підписом, ніж просто:

<div>
    <img src="semantic-html.jpg" alt="...">
    <p>Приклад структури.</p>
</div>

<details> та <summary>

Ці елементи дозволяють створювати розкривні блоки без JavaScript.

<details>
    <summary>Що таке семантична верстка?</summary>

    <p>
        Це використання HTML-елементів відповідно до їхнього призначення.
    </p>
</details>

Такий підхід особливо зручний для:

• FAQ;
• додаткових пояснень;
• технічних деталей;
• розгорнутих відповідей;
• прихованої інформації.

<address>

<address> призначений для контактної інформації, пов'язаної з відповідним документом або його автором.

Наприклад:

<address>
    Автор: Михайло Петров<br>
    Email: example@example.com
</address>

Це не просто універсальний контейнер для будь-якої адреси.

Наприклад, поштову адресу компанії можна оформити як контактну інформацію, якщо вона є частиною контактних даних.

<blockquote>

Для довгих цитат варто використовувати <blockquote>:

<blockquote>
    <p>
        Семантичний HTML описує структуру документа відповідно до значення його частин.
    </p>
</blockquote>

Для короткої цитати всередині речення використовується <q>:

<p>
    Він сказав: <q>HTML потрібно використовувати за призначенням.</q>
</p>

Якщо потрібно вказати джерело цитати, для <blockquote> можна використовувати атрибут cite.

<strong> та <em>

Семантичними є не тільки структурні теги.

Наприклад:

<strong>Важливий текст</strong>

означає текст із особливою важливістю.

А:

<em>Логічний наголос</em>

позначає текст, на якому зроблено акцент.

Це відрізняється від:

<b>Жирний текст</b>

та:

<i>Курсивний текст</i>

<b> та <i> не є просто "забороненими" тегами. Вони мають власні семантичні випадки використання, але не слід використовувати їх виключно як заміну поняттям "важливість" або "наголос".

<mark>

<mark> використовується для виділення частини тексту, яка має особливу актуальність у поточному контексті.

Наприклад, у результатах пошуку:

<p>
    Результат містить слово
    <mark>семантика</mark>.
</p>

Це відрізняється від <strong>, який позначає важливість тексту.

<button> та <a>

Одна з найпоширеніших помилок — використання <div> замість кнопки або посилання.

Якщо елемент виконує дію, використовуйте <button>:

<button type="button">
    Відкрити меню
</button>

Якщо елемент переміщує користувача на іншу адресу, використовуйте <a>:

<a href="/contacts/">
    Контакти
</a>

Не варто робити:

<div class="button">Відправити</div>

або:

<a href="#" onclick="openMenu()">
    Відкрити меню
</a>

як заміну справжній кнопці, якщо елемент не є навігаційним посиланням.

Правильна семантика часто автоматично дає браузеру необхідну поведінку з клавіатури, фокусом та іншими механізмами доступності.

<form>, <label> та <fieldset>

Форми також повинні мати логічну HTML-структуру.

Наприклад:

<form action="/send/" method="post">

    <div>
        <label for="name">Ваше ім'я</label>
        <input type="text" id="name" name="name">
    </div>

    <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
    </div>

    <button type="submit">
        Надіслати
    </button>

</form>

Для пов'язаних груп полів можна використовувати <fieldset>:

<fieldset>
    <legend>Контактні дані</legend>

    <label for="name">Ім'я</label>
    <input id="name" name="name">

    <label for="email">Email</label>
    <input id="email" name="email">
</fieldset>

Це значно краще описує структуру форми, ніж набір безіменних <div>.

Коли використовувати <div>

Після знайомства із семантичними тегами може виникнути помилкове враження, що <div> потрібно повністю прибрати з HTML.

Це не так.

<div> — нормальний HTML-елемент для нейтрального групування контенту, коли відповідного семантичного елемента немає.

Наприклад:

<div class="container">
    <div class="grid">
        ...
    </div>
</div>

Тут немає необхідності вигадувати семантику.

Проблема виникає тоді, коли <div> використовується замість елемента, який уже має необхідне значення.

Погано:

<div class="navigation">

краще:

<nav>

Погано:

<div class="article">

якщо це справді самостійна стаття.

Краще:

<article>

Семантична структура HTML-сторінки

Розглянемо простий приклад сторінки:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="utf-8">
    <title>Що таке семантична верстка</title>
</head>

<body>

<header>
    <a href="/">Логотип</a>

    <nav>
        <a href="/">Головна</a>
        <a href="/blog/">Блог</a>
        <a href="/contacts/">Контакти</a>
    </nav>
</header>

<main>

    <article>

        <header>
            <h1>Що таке семантична верстка</h1>

            <p>
                Опубліковано
                <time datetime="2026-09-23">
                    23 вересня 2026
                </time>
            </p>
        </header>

        <section>
            <h2>Що таке семантика</h2>

            <p>
                Семантична верстка використовує HTML-елементи
                відповідно до їхнього призначення.
            </p>
        </section>

        <section>
            <h2>Переваги семантичної верстки</h2>

            <p>
                Семантичний HTML допомагає створювати
                структуровані та доступні документи.
            </p>
        </section>

        <footer>
            <p>Автор: Михайло Петров</p>
        </footer>

    </article>

    <aside>
        <h2>Читайте також</h2>

        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Доступність</a></li>
        </ul>
    </aside>

</main>

<footer>
    <p>© 2026 My Site</p>
</footer>

</body>
</html>

З такої розмітки досить легко зрозуміти структуру сторінки навіть без CSS.

Як розмітити сторінку з точки зору семантики

Процес розмітки можна розділити на декілька кроків.

1. Визначте основні області сторінки

Для великих структурних частин можуть використовуватися:

<header>
<main>
<footer>

2. Виділіть навігацію

Основні блоки навігації:

<nav>

3. Визначте самостійний контент

Якщо блок можна сприймати як окремий матеріал:

<article>

4. Визначте тематичні розділи

Для окремих тематичних частин документа:

<section>

5. Виділіть додаткову інформацію

Для контенту, який доповнює основний:

<aside>

6. Побудуйте правильну ієрархію заголовків

Використовуйте:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Заголовки потрібно вибирати відповідно до структури документа, а не за розміром тексту.

7. Використовуйте списки

Якщо інформація є списком, не потрібно імітувати його за допомогою <div>:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

8. Використовуйте таблиці для табличних даних

Якщо дані мають структуру рядків і стовпців:

<table>
    <thead>
        <tr>
            <th>Мова</th>
            <th>Рік</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML</td>
            <td>1993</td>
        </tr>
    </tbody>
</table>

Таблиці не варто використовувати для побудови макета сторінки.

9. Використовуйте правильні інтерактивні елементи

Дія:

<button>Зберегти</button>

Навігація:

<a href="/save/">Перейти</a>

Форма:

<form>
    ...
</form>

Типові помилки семантичної верстки

Використання <div> для всього

Наприклад:

<div class="header">
<div class="menu">
<div class="content">
<div class="article">
<div class="footer">

Сам по собі <div> не є помилкою. Проблема виникає, коли ним замінюють елементи, які вже існують у HTML.

Використання <br> для створення відступів

Не варто робити:

<p>
    Перший рядок<br>
    <br>
    Другий рядок
</p>

для створення вертикальних відступів.

Відступи — завдання CSS.

p {
    margin-bottom: 20px;
}

<br> використовується тоді, коли перенос рядка є частиною змісту, наприклад у вірші або адресі.

Вибір заголовка за розміром

Неправильно:

<h1>Маленький текст</h1>
<h4>Великий текст</h4>

лише тому, що CSS для <h4> встановив більший шрифт.

Рівень заголовка повинен визначатися структурою документа.

Імітація кнопок через <div>

<div class="button" onclick="sendForm()">
    Відправити
</div>

Краще:

<button type="button" onclick="sendForm()">
    Відправити
</button>

Імітація посилань через JavaScript

Якщо користувача потрібно перевести на іншу сторінку, використовуйте <a>:

<a href="/about/">Про нас</a>

а не:

<div onclick="location.href='/about/'">
    Про нас
</div>

Надмірне використання <section>

Не кожен блок повинен бути <section>.

Наприклад:

<section class="container">
    ...
</section>

тільки тому, що це великий блок, не робить код семантичним.

Якщо контейнер використовується лише для CSS, краще:

<div class="container">
    ...
</div>

Використання <nav> для кожної групи посилань

Не кожна група посилань є навігацією.

Наприклад, список посилань "Схожі статті" може бути просто списком:

<section>
    <h2>Схожі статті</h2>

    <ul>
        <li><a href="#">Стаття 1</a></li>
        <li><a href="#">Стаття 2</a></li>
    </ul>
</section>

Семантична верстка: практичний приклад

Припустимо, потрібно зверстати сторінку статті.

Несемантичний варіант:

<div class="header">
    <div class="logo">My Site</div>

    <div class="menu">
        <a href="/">Головна</a>
        <a href="/blog/">Блог</a>
    </div>
</div>

<div class="content">

    <div class="post">
        <div class="title">
            Що таке HTML
        </div>

        <div class="text">
            HTML використовується для структурування веб-документів.
        </div>
    </div>

</div>

<div class="footer">
    © 2026
</div>

Тепер зробимо те саме із семантичними елементами:

<header>

    <a href="/" class="logo">
        My Site
    </a>

    <nav>
        <a href="/">Головна</a>
        <a href="/blog/">Блог</a>
    </nav>

</header>

<main>

    <article>

        <h1>Що таке HTML</h1>

        <p>
            HTML використовується для структурування
            веб-документів.
        </p>

    </article>

</main>

<footer>
    <p>© 2026</p>
</footer>

Візуально ці сторінки можуть бути абсолютно однаковими.

І це важливий момент:

Семантична верстка не визначає дизайн сайту. Вона описує значення та структуру його HTML.

Один і той самий семантичний HTML можна оформити за допомогою CSS у тисячі різних способів.

Семантична верстка та CSS

HTML відповідає переважно за структуру та зміст, а CSS — за візуальне оформлення.

Наприклад:

<nav class="main-menu">
    ...
</nav>

HTML повідомляє:

Це навігація.

А CSS визначає:

Як вона повинна виглядати.

Наприклад:

.main-menu {
    display: flex;
    gap: 20px;
}

Тому семантична верстка не означає відмову від CSS-класів.

Цілком нормально мати:

<header class="site-header">

або:

<article class="blog-post">

Семантичний тег і CSS-клас вирішують різні завдання.

Семантична верстка та ARIA

ARIA дозволяє додавати інформацію про ролі та стани елементів для допоміжних технологій.

Але якщо HTML вже має необхідний семантичний елемент, не варто без потреби замінювати його ARIA.

Наприклад, замість:

<div role="button">
    Відправити
</div>

краще:

<button>
    Відправити
</button>

Тобто принцип можна сформулювати так:

Спочатку використовуйте правильний HTML-елемент, а ARIA застосовуйте там, де нативної HTML-семантики недостатньо.

Чекліст семантичної HTML-розмітки

Перед завершенням верстки корисно перевірити сторінку за простим чеклістом.

Структура

• Є зрозуміла структура документа.
• Використовується <main> для основного контенту.
• Навігація оформлена через <nav>, де це доречно.
• Використовуються <header> та <footer> за призначенням.
• Самостійні матеріали оформлені через <article>.
• Тематичні розділи оформлені через <section> там, де це справді потрібно.

Заголовки

• Є логічна ієрархія <h1>–<h6>.
• Заголовки використовуються для структури, а не для зміни розміру шрифту.
• Розмір заголовків задається через CSS.

Контент

• Параграфи оформлені через <p>.
• Списки оформлені через <ul>, <ol>, <li>.
• Табличні дані оформлені через <table>.
• Цитати оформлені відповідними елементами.
• Дати можуть бути позначені через <time>.
• Ілюстрації за потреби оформлені через <figure> та <figcaption>.

Інтерактивні елементи

• Дії виконуються через <button>.
• Навігація виконується через <a>.
• Поля форми мають відповідні <label>.
• Не використовуються <div> як заміна кнопок або посилань без вагомої причини.

Доступність

• Зображення мають відповідний alt.
• Елементи можна використовувати з клавіатури.
• Інтерактивні елементи мають зрозумілі назви.
• Не використовується HTML лише для візуального ефекту, якщо існує відповідний семантичний елемент.

Висновок

Семантична верстка — це не набір обов'язкових тегів, які потрібно механічно вставити у кожен сайт.

Головна ідея значно простіша:

HTML повинен описувати зміст і структуру документа, а не тільки його зовнішній вигляд.

Якщо це навігація — використовуйте <nav>.

Якщо це основний контент — <main>.

Якщо це самостійний матеріал — <article>.

Якщо це тематичний розділ — <section>.

Якщо це додаткова інформація — <aside>.

Якщо це дія — <button>.

Якщо це перехід на іншу адресу — <a>.

Якщо це заголовок — <h1>–<h6>.

Якщо це список — <ul> або <ol>.

Якщо це таблиця даних — <table>.

А якщо для певного завдання немає відповідного семантичного елемента — цілком нормально використовувати <div> або <span>.

Правильно написаний семантичний HTML робить код зрозумілішим для розробника, структуру документа — зрозумілішою для браузерів та допоміжних технологій, а сам сайт — потенційно доступнішим для ширшого кола користувачів.

Тому семантична верстка — це не про те, щоб позбутися <div>. Це про те, щоб кожен HTML-елемент використовувався відповідно до свого призначення.

FAQ: часті запитання про семантичну верстку