Семантика HTML ломается не в коде, а в лишних div и неверных заголовках

Семантика HTML ломается не в коде, а в лишних div и неверных заголовках

Для доступности сайта важна не «красота» разметки, а понятная структура. Экранный диктор читает страницу через семантику: заголовки, списки, кнопки, ссылки, области. Если вместо button стоит div с кликом, пользователь теряет поведение с клавиатуры и понятное название элемента.

Базовые правила простые:
— один h1 на страницу, дальше h2–h6 по иерархии;
— ul/ol для списков, а не набор абзацев с тире;
— button для действий, a для переходов;
— main, nav, header, footer и section используйте по назначению.

Не злоупотребляйте div и span: они нейтральны и не дают контекста. Если блок можно назвать по смыслу — лучше выбрать семантический тег. Это помогает не только assistive tech, но и SEO, поддержке кода и будущим правкам.

Проверка простая: откройте страницу и попробуйте «пройтись» по ней только заголовками и клавиатурой. Если структура путает вас, пользователя с нарушением зрения она запутает ещё быстрее. Сначала смысл, потом стили.