<b>HTML-семантика на WordPress: 7 тегов, которые улучшают доступность</b>

<b>HTML-семантика на WordPress: 7 тегов, которые улучшают доступность</b>

Семантика HTML помогает не только поисковикам, но и людям с экранными дикторами: страница становится понятнее, а навигация — быстрее. Если верстка собрана из div без смысла, пользователь теряет структуру текста и может пропустить важный блок.

Базовый набор, который стоит использовать осознанно:
— <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;footer&gt;</code> — разделяют страницу на зоны
— <code>&lt;nav&gt;</code> — только для основной навигации
— <code>&lt;article&gt;</code> — для самостоятельного материала
— <code>&lt;section&gt;</code> — для тематических блоков с заголовком
— <code>&lt;button&gt;</code> вместо кликабельного <code>&lt;div&gt;</code>
— <code>&lt;label&gt;</code> для каждого поля формы
— <code>&lt;h1&gt;–&lt;h6&gt;</code> в строгой иерархии

Ошибка, которая встречается чаще всего: заголовки ставят ради размера, а не структуры. Если <code>h3</code> идет без <code>h2</code>, а <code>main</code> повторяется в нескольких местах, скринридер читает страницу как набор случайных фрагментов. То же касается ссылок без текста: «подробнее» без контекста бесполезно.

Проверяйте не дизайн, а смысл: каждый блок должен отвечать на вопрос «зачем он здесь?». Если элемент можно заменить на более точный тег без потери стиля — лучше заменить. Так сайт становится удобнее и для людей, и для автоматических инструментов.

Начните с главной страницы и форм: там семантические ошибки заметнее всего, а исправление дает самый быстрый эффект.