Зачем нужна семантическая вёрстка
Вопрос
Объясни, что такое семантическая вёрстка и зачем она нужна, если div можно стилизовать как угодно.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Тег выбирают по смыслу содержимого, внешний вид задаёт CSS
Скринридер строит дерево доступности по тегам: роли, ориентиры, навигация по заголовкам
Нативные элементы дают поведение даром: фокус, клавиатуру, отправку формы
Поисковики лучше понимают структуру и основной контент
Код читается быстрее, меньше классов-описаний
Пример ошибки: `<div onclick>` вместо `<button>`
Что могут спросить следом
- Чем
<section>отличается от<article>и<div>? - Что скринридер скажет про
<ul>с пятью пунктами? - Когда div всё-таки уместен?
Разбор
Семантическая вёрстка значит, что тег выбирают по тому, что это за содержимое, а внешний вид задаётся CSS. Это важно трём сторонам. Первая: вспомогательные технологии. Скринридер строит дерево доступности из тегов, знает, что это кнопка, список из пяти пунктов, навигация, и даёт прыгать по заголовкам и областям. Вторая: нативные элементы приносят поведение. <button> фокусируется, нажимается Enter и Space, отправляет форму; div ничего этого не умеет, и всё придётся писать руками. Третья: поисковики и коллеги. По <main>, <article>, <nav> понятно, где основной контент. При этом div не враг: он нужен для группировки и стилизации, когда смыслового тега нет. Ошибка начинается, когда div подменяет кнопку, ссылку или список.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.