Семантика HTML: 7 тегов, которые реально помогают доступности сайта

Семантика HTML: 7 тегов, которые реально помогают доступности сайта

Семантика — это не «красота кода», а подсказка браузеру и скринридеру. Когда теги выбраны правильно, пользователю проще понять структуру страницы и быстро найти нужный блок.

Для текста и структуры чаще всего важны:
— header, main, footer — делят страницу на понятные зоны;
— nav — сразу отмечает меню;
— article и section — помогают группировать смысловые блоки;
— h1-h6 — строят иерархию заголовков.

Типичная ошибка — использовать один div на всё. Визуально это может выглядеть нормально, но для ассистивных технологий страница превращается в набор одинаковых контейнеров. Ещё одна проблема — прыгать по заголовкам: после h1 ставить сразу h4 без логики.

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

Начните с каркаса страницы и заголовков: это самый быстрый способ сделать WordPress-сайт понятнее для всех пользователей.