Семантическая разметка

Семантические теги говорят браузеру и скринридерам «ЧТО это». <header> — шапка, <nav> — навигация, <main> — основной контент, <article> — самостоятельная статья, <section> — раздел, <aside> — боковая панель, <footer> — подвал. Они делают код читаемым и доступным.

Основные семантические теги HTML5:

<header> — шапка страницы или секции. Обычно содержит логотип, заголовок, навигацию.

<nav> — блок навигации. Содержит ссылки на другие страницы или разделы.

<main> — основной контент страницы. Только один на страницу! Не включает header, footer, nav.

<article> — самостоятельный контент: статья, пост, комментарий. Может жить отдельно (в RSS, агрегаторах).

<section> — тематическая группировка контента. Обычно с заголовком.

<aside> — побочный контент: боковая панель, реклама, ссылки.

<footer> — подвал страницы или секции: копирайт, ссылки, контакты.

Зачем нужна семантика:

• SEO — поисковики понимают структуру
• Доступность — скринридеры читают «навигация», «основной контент»
• Поддержка — код проще читать и поддерживать
• Спецификация — браузеры понимают, как обрабатывать элемент

Семантические теги — как.rooms в здании. header — прихожая, nav — указатели, main — главный зал, article — отдельная комната, section — зона внутри зала, aside — кладовка, footer — задний двор. Каждая комната имеет свою функцию.

**Самый простой:**

<header>
  <h1>Мой сайт</h1>
</header>
<main>
  <article>
    <h2>Статья</h2>
    <p>Текст статьи.</p>
  </article>
</main>
<footer>
  <p>© 2025</p>
</footer>

Базовая семантическая структура: header, main, article, footer.

**Простой:**

<header>
  <h1>Блог</h1>
  <nav>
    <a href="/">Главная</a>
    <a href="/posts">Статьи</a>
    <a href="/about">О нас</a>
  </nav>
</header>

<main>
  <article>
    <h2>Как изучать HTML</h2>
    <section>
      <h3>Введение</h3>
      <p>HTML — первый шаг в веб-разработке.</p>
    </section>
    <section>
      <h3>Практика</h3>
      <p>Лучший способ учиться — практиковаться.</p>
    </section>
  </article>

  <aside>
    <h3>Рекомендации</h3>
    <ul>
      <li><a href="/css">Изучить CSS</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2025 Мой блог</p>
</footer>

Полная семантическая структура блога с nav, article, section, aside.

**Реальный пример:**

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PROlab Academy</title>
</head>
<body>
  <header>
    <a href="/">
      <img src="logo.svg" alt="PROlab Academy" width="150" height="40">
    </a>
    <nav aria-label="Основная навигация">
      <a href="/courses">Курсы</a>
      <a href="/about">О нас</a>
      <a href="/contacts">Контакты</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Введение в HTML</h1>
        <time datetime="2025-01-15">15 января 2025</time>
      </header>

      <section>
        <h2>Что такое HTML?</h2>
        <p>HTML — язык разметки...</p>
      </section>

      <section>
        <h2>Зачем учить HTML?</h2>
        <p>HTML — основа всего веба...</p>
      </section>

      <footer>
        <p>Автор: Иван Иванов</p>
      </footer>
    </article>

    <aside>
      <h2>Другие статьи</h2>
      <ul>
        <li><a href="/css-intro">Введение в CSS</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 PROlab Academy. Все права защищены.</p>
  </footer>
</body>
</html>

Полный пример с семантическими тегами, time, aria-label и правильной вложенностью.

**Неправильно:** Использовать div вместо семантических тегов

**Почему:** div не несёт информации о назначении элемента. Браузеры, скринридеры и поисковики не понимают структуру.

**Правильно:** Для шапки — header, для навигации — nav, для контента — main. div — когда нет подходящего тега.

**Неправильно:** Вкладывать header/footer внутрь article

**Почему:** header/footer внутри article — это header/footer этой статьи (не страницы). Это допустимо, но нужно понимать разницу.

**Правильно:** header/footer страницы — на уровне body. header/footer статьи — внутри article.

**Неправильно:** Использовать несколько main

**Почему:** main — основной контент страницы. Только один! Несколько main запутывают скринридеры.

**Правильно:** Один <main> на страницу. Для других контейнеров используйте section, article, div.

• header — шапка, nav — навигация, main — основной контент
• article — самостоятельная статья, section — раздел
• aside — побочный контент, footer — подвал
• Один main на страницу
• Семантика улучшает SEO и доступность

Назад: Вы знаете продвинутые формы (H12) — семантическая разметка структурирует всю страницу.

Вперёд: В следующем уроке (H14) вы изучите атрибуты: id, class, data-* и глобальные атрибуты.

• MDN: семантика в HTML
• WHATWG: разделы и заголовки