<b>Семантика HTML на WordPress: 6 тегов, которые делают контент понятнее для скринридера</b>

<b>Семантика HTML на WordPress: 6 тегов, которые делают контент понятнее для скринридера</b>

Если на странице есть только <code>div</code> и <code>span</code>, скринридеру сложнее понять структуру. Семантические теги помогают сразу выделить смысл: заголовки, списки, навигацию, основное содержимое.

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

Не путайте семантику с внешним видом. Тег выбирают по смыслу, а оформление задают стилями. Например, кнопка-меню может выглядеть как ссылка, но если она открывает панель, ей нужен именно <code>button</code>, а не <code>a</code>. Это помогает и клавиатурной навигации, и озвучке.

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