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

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

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

Основной набор для WordPress:
— <code>header</code>, <code>nav</code>, <code>main</code>, <code>footer</code> — каркас страницы;
— <code>article</code> — самостоятельный материал;
— <code>section</code> — смысловой блок внутри страницы;
— <code>aside</code> — дополнительная информация;
— <code>button</code> вместо кликабельного div, если элемент что-то делает.

Важно не путать смысл и внешний вид. Заголовки должны идти по иерархии: один <code>h1</code> на страницу, дальше <code>h2</code>, <code>h3</code> по вложенности. Не перескакивайте с <code>h2</code> сразу на <code>h4</code> только ради дизайна. Для скринридера это не декор, а структура документа.

Проверьте ещё три вещи: у меню должен быть понятный <code>nav</code>, у картинок — осмысленный <code>alt</code>, у формы — связанные <code>label</code>. Тогда HTML начинает работать как навигация, а не просто как контейнер для блоков.

Семантика — это не «красиво в коде», а прямой способ сделать сайт читаемым. Начните с каркаса страницы и иерархии заголовков — это даёт самый заметный эффект.