Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про HTML: semantic, html

Что такое семантическая верстка и для чего она используется?

Вопрос проверяет понимание смыслового использования HTML-тегов и их роли для браузеров, поисковиков и вспомогательных технологий.

Короткий ответ

Семантическая верстка — это использование HTML-тегов по их смысловому назначению.
Она помогает браузерам и поисковым системам лучше понимать структуру страницы.
Также она улучшает доступность для скринридеров.
Вместо универсальных <div> используются теги вроде <header>, <main>, <article>.

Длинный ответ

HTML предоставляет теги, которые описывают не внешний вид, а смысл содержимого. Семантическая верстка строится на использовании именно таких элементов.

Определение

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

Примеры семантических тегов

На практике семантика реализуется через специализированные HTML-элементы:

  • <header> — шапка страницы или раздела

  • <nav> — навигация

  • <main> — основной контент страницы

  • <section> — логический раздел

  • <article> — независимый контентный блок

  • <footer> — подвал страницы или секции

Чем лучше семантика

Использование семантических тегов дает несколько преимуществ:

  1. Улучшает читаемость HTML-кода

  2. Помогает поисковым системам понимать структуру страницы

  3. Повышает доступность для screen reader

  4. Упрощает поддержку и развитие проекта

Пример

<main>
  <article>
    <header>
      <h1>Заголовок статьи</h1>
    </header>
    <p>Текст статьи</p>
  </article>
</main>

Вывод

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

Уровень

  • Рейтинг:

    5

  • Сложность:

    4

Навыки

  • HTML

    HTML

Ключевые слова

#semantic

#html

Подпишись на React Developer в телеграм