Сторінка може виглядати охайно й водночас мати незрозумілу будову. Наприклад, великі жирні абзаци схожі на заголовки, але в HTML залишаються звичайними абзацами. Семантична розмітка прибирає цю розбіжність: елемент описує роль вмісту, а CSS визначає його вигляд. Нижче — спосіб розмітити невелику сторінку послуги або навчальну статтю, не перетворюючи кожен блок на окрему складну конструкцію.
Спочатку складіть план без оформлення
Випишіть назву сторінки, основні питання читача й порядок відповідей. Для послуги це можуть бути опис роботи, етапи, умови та контакти. Для посібника — задача, приклад і перевірка результату. Перетворіть ці пункти на заголовки, а вже потім вибирайте сітку, кольори та розмір тексту. Так зміст не залежатиме від того, скільки колонок залишиться на телефоні.
Практичне правило для невеликої статті: один головний заголовок h1, основні розділи h2, підрозділи h3. Це робоча домовленість для зрозумілого документа, а не вимога додати певну кількість заголовків. Рівень вибирають за вкладеністю змісту. Менший шрифт задають стилем, а не заміною h2 на h4.
Дайте великим ділянкам сторінки зрозумілі ролі
main позначає головний вміст, nav — важливий блок навігації, article — самостійний матеріал. header і footer можна використовувати як для сторінки, так і всередині статті. section доречний для тематичного розділу; звичайній обгортці сітки часто достатньо div. Семантичні елементи не потрібно додавати лише тому, що вони існують.
<header>
<a href="/">Майстерня вебу</a>
<nav aria-label="Основне меню">
<a href="/guides/">Посібники</a>
<a href="/about/">Про сайт</a>
</nav>
</header>
<main id="content">
<article>
<h1>Як підготувати сторінку до публікації</h1>
<p>Короткий опис задачі.</p>
<section aria-labelledby="checks">
<h2 id="checks">Перевірка посилань</h2>
<p>Що саме потрібно перевірити.</p>
</section>
</article>
</main>Приклад показує каркас, а не готовий дизайн. Усі наведені адреси потрібно замінити реальними сторінками. Якщо навігацій декілька, назвіть їх по-різному, наприклад «Основне меню» та «Зміст статті». Назва має пояснювати відмінність, а не повторювати слово «навігація» в кожному посиланні.
Вибирайте елемент за дією
Посилання веде до іншої адреси або частини документа. Кнопка виконує дію: розкриває панель, зберігає зміни, надсилає форму. Клікабельний div потребує додаткової роботи з клавіатурою й доступною назвою; часто простіше одразу використати правильний елемент. Для кнопки всередині форми явно задавайте потрібний type, щоб допоміжна дія випадково не стала надсиланням.
Переліку можливостей пасує ul, послідовності кроків — ol. Таблиця потрібна для даних із взаємозв’язком рядків і стовпців, а не для двох колонок макета. Підпис до ілюстрації можна зв’язати через figure і figcaption. Завдяки цьому структуру легше змінити, не пояснюючи її заново кожним CSS-класом.
Перевіряйте читання, а не лише скриншот
Відкрийте список заголовків у засобі перевірки доступності або тимчасово перегляньте сторінку без стилів. Чи можна зрозуміти план, не читаючи всіх абзаців? Пройдіть посилання клавішею Tab: порядок має збігатися з очікуваним читанням, а фокус залишатися помітним. Після зміни ширини вікна початок і кінець кожного розділу повинні залишатися очевидними.
- Кожен заголовок описує наступний розділ, а не служить декоративним слоганом.
- Текст посилання зрозумілий без сусіднього «натисніть тут».
- Порядок у вихідному HTML логічний до застосування сітки.
- Форми, таблиці й кнопки використовують свої елементи.
- Однакова навігація має однакові назви на різних сторінках.
Семантика не замінює перевірку контрасту, альтернативних описів і поведінки інтерфейсу. Її практичний результат скромніший і корисніший: читач, браузер і наступний розробник отримують узгоджену карту документа. Підтримувати таку карту варто разом із текстом, особливо після додавання нових блоків.