Семантика HTML ломается не в коде, а в мелочах разметки

Семантика HTML ломается не в коде, а в мелочах разметки

Если на сайте теги стоят “для красоты”, скринридер читает страницу как шум. Семантика нужна не разработчику, а человеку: она задаёт порядок, смысл и навигацию без догадок.

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

Частые ошибки в WordPress: несколько <h1> ради дизайна, меню внутри случайных <div>, ссылки, которые работают как кнопки, и иконки без текста. Визуально всё может выглядеть нормально, но навигация с клавиатуры и чтение с экрана уже разваливаются.

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

Семантика — это не “чуть лучше для SEO”, а база доступности: сначала смысл, потом оформление.