Что такое семантика в HTML

Семантика отвечает на простой вопрос: что это за часть интерфейса по смыслу. Не какой у нее цвет. Не какой класс удобнее для CSS. А какую роль этот элемент играет для пользователя и документа.

Например, список ссылок на разделы сайта лучше описать как <nav>. Основную уникальную часть страницы лучше поместить в <main>. Отправку формы лучше делать через <button type="submit">, а не через кликабельный <div>.

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

Семантика влияет не только на аккуратность кода. Нативные элементы уже дают готовое поведение. <button> получает фокус с клавиатуры и активируется Enter или Space. <label> связывает текст с полем формы. <h1> - <h6> создают структуру заголовков, по которой удобно перемещаться.

Это особенно важно для доступности. Скринридер строит представление страницы на основе дерева доступности. Если вся страница сделана из <div>, пользователю сложнее найти основное содержимое, навигацию, форму или кнопку.

Семантика помогает избежать и обычных UI-багов. Кнопка без type внутри формы может случайно отправить данные. Ссылка с href="#" вместо действия меняет URL, сбивает клавиатурную навигацию и портит аналитику клика. Правильный тег помогает выбрать нужное поведение еще до обработчиков.

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

Начинайте не со списка тегов, а с назначения блока. Если элемент что-то делает, чаще всего это кнопка. Если ведет по адресу, это ссылка. Если группирует поля ввода, нужны форма, label и связанные элементы. Если блок нужен только для grid или flex, семантический тег может быть лишним.

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

<!-- Плохо: смысл спрятан в class и onClick -->
<div class="header">
  <div class="menu">
    <span onclick="go('/')">Главная</span>
    <span onclick="go('/pricing')">Тарифы</span>
  </div>
</div>

<div class="content">
  <div class="title">Настройки профиля</div>
  <div class="save" onclick="saveProfile()">Сохранить</div>
</div>

Безопаснее выбрать элементы по назначению. Внешний вид можно сделать таким же через CSS, но поведение и смысл будут правильнее. Если сохранение запускает запрос, отдельно добавьте состояние loading, disabled и обработку ошибки. Семантика не заменяет UI-состояния, но дает правильную основу для взаимодействия.

<header>
  <nav aria-label="Основная навигация">
    <a href="/">Главная</a>
    <a href="/pricing">Тарифы</a>
  </nav>
</header>

<main>
  <h1>Настройки профиля</h1>
  <button type="button" onclick="saveProfile()">Сохранить</button>
</main>

В ответе на интервью не перечисляйте все теги HTML подряд. Лучше покажите принцип выбора и один пример, где неправильная разметка дает конкретный риск.

<div> и <span> не плохие элементы. Они нейтральные. Их нормально использовать для оберток, сетки, группировки без отдельного смысла или небольших inline-фрагментов.

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

ARIA не должна быть первым способом починить HTML. Правило native first обычно безопаснее: если есть подходящий нативный элемент, используйте его. ARIA добавляйте для уточнения имени, состояния или сложного виджета, когда нативной семантики не хватает.

Про SEO лучше говорить коротко и без обещаний. Семантическая разметка помогает поисковым системам лучше понимать структуру страницы: где заголовки, навигация, основной контент, повторяющиеся блоки. Но сама по себе она не гарантирует рост позиций.

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

Перед версткой задайте себе три вопроса. Что это за элемент по смыслу. Как пользователь будет с ним взаимодействовать. Есть ли нативный HTML-элемент, который уже дает нужную роль и поведение.

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