Для чего нужна семантика в HTML?

Семантика в HTML — использование тегов по их смыслу: заголовок — h1, навигация — nav, кнопка — button. Так разметка описывает не только вид, но и роль содержимого.

Зачем нужна

• Доступность. Скринридеры объявляют роли («кнопка», «навигация», «заголовок 2 уровня»), пользователи прыгают по заголовкам и областям страницы.
• Встроенное поведение. button фокусируется и нажимается с клавиатуры, a открывается в новой вкладке, form отправляется по Enter — без лишнего JS.
• SEO. Поисковики лучше понимают структуру и главное содержимое.
• Поддержка кода. Разметку проще читать, чем «суп из div».

<header>…</header>
<nav aria-label="Основное меню">…</nav>
<main>
  <article>
    <h1>Заголовок статьи</h1>
    <p>Текст</p>
  </article>
</main>
<footer>…</footer>

Частые ошибки

• div с onClick вместо button;
• заголовки не по порядку, выбранные ради размера шрифта;
• таблицы для раскладки.

Коротко для собеседования

Семантика — теги по смыслу; она даёт доступность, встроенное поведение элементов, лучшее SEO и понятный код.

Подробнее: MDN — Семантика