Что такое семантическая верстка и почему она важна?

Что проверяют

Понимаете ли вы, что теги несут смысл для машин, и знаете ли, кому именно это нужно.

Как отвечать

Семантическая вёрстка это использование тегов по назначению: header, nav, main, article, section, aside, footer, button, label, заголовки по уровням. Противоположность это разметка из одних div и span с классами.

Кому это нужно:

• скринридерам: по ориентирам (main, nav) человек прыгает между разделами, а по заголовкам строит оглавление страницы. С div ничего этого нет;
• клавиатуре: button фокусируется и срабатывает по Enter и пробелу сам, а div с обработчиком клика нужно вручную снабжать tabindex, обработкой клавиш и ролью;
• поисковикам: структура помогает понять, где основной контент, а где навигация;
• браузеру: формы, валидация, автозаполнение, режим чтения работают на семантике;
• разработчику: разметка читается без погружения в CSS.

Практические примеры разницы: button вместо div onclick, label связанный с полем (клик по подписи ставит фокус), один h1 на страницу и последовательные уровни без пропусков, ul для списков, time для дат, table для табличных данных, а не для раскладки.

Полезно добавить: ARIA не заменяет семантику. Первое правило ARIA гласит, что если есть подходящий элемент, надо использовать его, а не навешивать роль на div.

Где спотыкаются

Считают, что семантика нужна только для SEO.

Делают кнопки из div и ломают клавиатуру.

Ставят заголовки по размеру шрифта, а не по уровню в структуре.

Навешивают role="button" вместо того, чтобы взять button.