Что такое семантические теги

Семантический тег отвечает на вопрос, что это за часть страницы. Он не говорит, как блок выглядит. Один и тот же визуальный блок можно сверстать по-разному. Правильный выбор зависит от смысла контента.

Например, меню сайта лучше описать как <nav>, основное содержимое как <main>, а нейтральную обертку для grid или flex как <div>. Так браузер, вспомогательные технологии и разработчики получают более точную информацию о структуре страницы.

На интервью важно не просто перечислить теги. Сильнее звучит мысль: семантика уменьшает количество ручных ролей, помогает навигации по странице и делает код честнее. Если роли у блока нет, не нужно выдумывать ее ради красивого HTML.

Хороший критерий такой: если удалить CSS, структура все еще должна быть понятна. Если без классов видно, что это навигация, основной контент, раздел или самостоятельный материал, тег выбран удачно.

При этом не нужно превращать семантику в соревнование на меньшее число div. Нейтральный контейнер лучше, чем тег с неверной ролью. Ошибка в семантике может мешать пользователю скринридера быстрее, чем обычный <div> без роли.

Плохой пример: все важные части страницы спрятаны в одинаковых контейнерах. Визуально это может работать, но структура для доступности и поддержки почти не читается.

<!-- Плохо: смысл блоков есть только в class -->
<div class="header">
  <div class="menu">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

Лучше явно описать роли там, где они действительно есть.

<header>
  <nav aria-label="Основная навигация">...</nav>
</header>

<main>
  <article>
    <h1>Как выбрать тариф</h1>
    <p>...</p>
  </article>
</main>

<footer>...</footer>

В этом варианте пользователь может быстрее перейти к навигации или основному содержимому. Разработчик тоже видит структуру без чтения всех классов. Но если внутри <main> нужен контейнер только для отступов, там спокойно может остаться <div class="container">.

Браузер строит DOM, а затем на его основе формирует accessibility tree. В это дерево попадают роли, имена, состояния и связи элементов. Семантические теги часто дают правильную роль автоматически.

Например, <nav> становится навигационной областью, <main> основной областью, а <button> интерактивной кнопкой с ожидаемой клавиатурной поддержкой. Если сделать кнопку через <div>, придется вручную добавить роль, tabIndex, обработку Enter и Space, состояние disabled и видимый фокус. Это больше кода и больше шансов получить UI, который работает мышью, но ломается для клавиатуры и скринридера.

В React это особенно легко спрятать в компоненте. Если компонент называется Button, но внутри рендерит <div>, проблема уедет во все места использования. Безопаснее, чтобы базовые компоненты рендерили нативные элементы и принимали правильные HTML-атрибуты.

Важно сказать спокойно: семантический HTML не решает всю доступность. Нужны еще подписи полей, правильный порядок фокуса, видимый focus state, тексты ошибок и понятные имена областей. Но без хорошей семантики база страницы становится слабее.

Семантическая разметка может помогать поисковым системам лучше понимать структуру страницы, но не стоит продавать ее как магический SEO-инструмент. На интервью безопаснее сказать, что это один из факторов качества HTML, а не гарантия роста позиций.

Более практичный плюс для frontend-разработчика в поддержке. Когда в коде есть <main>, <nav>, <article> и понятные заголовки, проще менять страницу без поломки смысла. Когда все является <div>, роль блока приходится угадывать по className, CSS и соседнему коду.

Можно ответить так:

Семантические теги это элементы HTML, которые описывают назначение контента. Я использую main для основного содержимого, nav для навигации, header и footer для вводной и нижней части страницы или раздела, article для самостоятельного блока, section для тематического раздела. Это делает структуру понятнее, помогает доступности и уменьшает необходимость вручную добавлять роли через ARIA.

Если хотите усилить ответ, добавьте границу:

При этом я не заменяю все div на семантические теги. Если контейнер нужен только для layout или стилизации, div нормален. Опасно не отсутствие красивого тега, а неверная роль, которая создает шум в accessibility tree.