Вопрос с собеседования · Frontend

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

JuniorБраузер и DOM
Ещё спрашивают так:
  • Чем div отличается от section и article?
  • Зачем нужны header, nav, main?
Коротко

Семантические теги описывают смысл содержимого: header, nav, main (один на странице), article, section, aside, footer, заголовки h1–h6 по иерархии, button для действий, a для переходов, ul/ol для списков, table для таблиц данных. Это нужно скринридерам (навигация по областям и заголовкам), поисковикам и разработчикам. div и span — для оформления, когда подходящего тега нет.

  • Кликабельный div вместо button — нет фокуса с клавиатуры и роли для скринридера
  • Заголовки не пропускают уровни ради размера шрифта — размер задаёт CSS
  • alt у изображений: описание или пустой alt для декоративных

Подробно

<header><nav>…</nav></header>
<main>
  <article><h1>Заголовок</h1><section><h2>Часть</h2>…</section></article>
</main>
<footer>…</footer>

Что хотят услышать

  • Основные семантические теги.
  • Польза для доступности и SEO.
  • button против div, иерархия заголовков, alt.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Семантика нужна только для красоты кода
  • ✗Уровни заголовков выбирают по нужному размеру шрифта, а кнопку удобнее делать из div
  • ✓Теги передают смысл содержимого — это помогает скринридерам, поисковикам и людям
  • ✗Кнопку лучше делать из div с обработчиком клика

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования