Чем полезна семантическая верстка

Семантическая верстка отвечает на простой вопрос. Что это за часть интерфейса по смыслу. div говорит только "это контейнер". nav говорит "это навигация". main говорит "это основной контент". button говорит "это действие".

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

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

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

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

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

В реальной работе семантика чаще всего ломается не в больших рассуждениях, а в мелких компонентах. Например, кликабельная карточка сделана не ссылкой, кнопка сделана через div, ссылка работает через обработчик onClick, а заголовок выбран по размеру шрифта. Такие решения кажутся быстрыми, но потом создают проблемы с клавиатурой, скринридерами, тестами и поддержкой.

Плохой вариант. Элемент выглядит как кнопка, но в HTML это контейнер.

function OpenModal({ onOpen }) {
  return (
    <div className="button" onClick={onOpen}>
      Открыть фильтры
    </div>
  );
}

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

Безопаснее так:

function OpenModal({ onOpen }) {
  return (
    <button type="button" className="button" onClick={onOpen}>
      Открыть фильтры
    </button>
  );
}

Теперь смысл и поведение совпадают. Внешний вид все еще можно полностью контролировать через CSS.

Для accessibility важны не только отдельные кнопки и ссылки, но и общая структура. Landmarks вроде header, nav, main, aside и footer помогают пользователю быстро переходить между крупными областями страницы. Правильные заголовки помогают понять иерархию контента.

Если вместо структуры есть только вложенные div, пользователь скринридера проходит больше лишнего контента. Это плохой UX, даже если визуально страница выглядит аккуратно.

Семантическая верстка помогает поисковым системам понять, где основной контент, заголовки, навигация, дата, статья или список. Это полезно для индексации и сниппетов. Но не стоит говорить, что один тег article автоматически поднимет страницу в выдаче.

Точная формулировка звучит так. Семантика поддерживает SEO, потому что делает структуру документа понятнее. Но позиции зависят также от качества контента, технической доступности страницы для индексации, метаданных, производительности и других факторов.

Во фронтенде семантика часто прячется внутри компонентов. Если компонент Button рендерит div, ошибка распространяется на весь проект. Если компонент Link не рендерит настоящую ссылку с href, пользователь может потерять открытие в новой вкладке, копирование ссылки и ожидаемое поведение клавиатуры.

Поэтому на интервью можно добавить практический вывод. Я проверяю не только JSX на странице, но и то, какой HTML реально получается в DOM. Особенно для кнопок, ссылок, форм, модальных окон, меню и карточек.