Что такое семантика в HTML и для чего она нужна?
Что проверяют
Понимаете ли вы, что семантика даёт поведение и доступность, а не только красивые имена тегов.
Как отвечать
Семантическая разметка это использование тегов по смыслу, а не по внешнему виду. Заголовок размечается заголовком, навигация навигацией, кнопка кнопкой.
Зачем это нужно, по убыванию важности:
1. Доступность. Программа чтения с экрана строит по разметке навигацию: пользователь перемещается по заголовкам, переходит к основному содержимому, пропускает навигацию. Для незрячего человека структура документа это единственный способ ориентироваться. Разметка из одинаковых блоков превращает страницу в сплошной поток текста.
2. Готовое поведение. Это самый практичный аргумент. Настоящая кнопка получает фокус, срабатывает по пробелу и вводу, объявляется как кнопка, участвует в отправке формы. Блок с обработчиком нажатия не делает ничего из этого, и всё приходится воспроизводить вручную: роль, возможность фокуса, обработку клавиш. Обычно воспроизводят наполовину, и элемент остаётся недоступным с клавиатуры. То же с ссылкой: она даёт открытие в новой вкладке, копирование адреса и предпросмотр.
3. Поисковые системы лучше понимают структуру.
4. Поддерживаемость: разметка читается без обращения к стилям.
Что использовать: структурные теги для шапки, навигации, основного содержимого, самостоятельных блоков и подвала, заголовки по уровням без пропусков, списки для перечислений, таблицы для табличных данных, подписи к полям форм.
Типичные нарушения: блок с обработчиком вместо кнопки, поле без подписи, заголовки выбранные по размеру шрифта, а не по уровню, таблицы для раскладки.
Как проверить за минуту: пройти страницу клавишей табуляции. Если до части действий не добраться или не видно, где находится фокус, семантика нарушена.
Где спотыкаются
Делают кнопки из блоков с обработчиком.
Выбирают уровень заголовка по размеру шрифта.
Не связывают подпись с полем ввода.
Добавляют роли вручную вместо использования подходящего тега.