Что такое семантическая разметка HTML?

Вопрос

Что такое семантический HTML и почему он важен?

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

Семантическая разметка — это использование HTML-тегов в соответствии с их смысловым назначением (<header>, <nav>, <main>, <article>, <footer>), а не универсального <div> для всего подряд.

Подробный ответ

Семантические теги описывают смысл содержимого, а не только его внешний вид. Это даёт три ключевых преимущества:

1. Доступность (accessibility) — скринридеры используют семантические теги для построения карты страницы, что позволяет пользователям с нарушениями зрения быстро перемещаться между разделами.
2. SEO — поисковые системы лучше понимают структуру и значимость контента (например, <article> сигнализирует о самостоятельном материале).
3. Поддерживаемость кода — разметка <nav>, <aside>, <section> сама документирует структуру страницы для других разработчиков.

Пример немного семантики:

• <header> — шапка страницы или секции.
• <nav> — блок навигации.
• <main> — основной уникальный контент страницы (должен быть один на странице).
• <article> — самостоятельный, независимо распространяемый блок (пост, карточка товара).
• <section> — тематическая группа контента, обычно с заголовком.
• <aside> — второстепенный контент (сайдбар, врезка).
• <footer> — подвал страницы или секции.

Пример

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <section>...</section>
    </article>
    <aside>Похожие статьи</aside>
  </main>

  <footer>© 2026</footer>
</body>

Дополнительные вопросы

• В чём разница между <section> и <div>?
• Может ли на странице быть несколько тегов <main>?
• Как семантика влияет на SEO?