header, nav, main, footer

<header>, <nav>, <main> и <footer> — landmark-элементы HTML5, задающие крупную структуру страницы и создающие точки навигации для screen readers.

Зачем нужно

Landmark-элементы позволяют пользователям screen readers перемещаться по разделам страницы напрямую (клавиша D/R в NVDA, ротор в VoiceOver) — без перелистывания всего контента. Это ключевое требование WCAG 1.3.1 (структура). Дополнительно: код с <header>, <main>, <footer> читается как документ, а не как мешанина <div>.

Где используется

  • Базовая структура каждой HTML-страницы
  • Шаблоны SSR-фреймворков (Blade, Jinja2, EJS)
  • Компоненты Layout в React/Vue/Angular

<header> — шапка

Вводная секция страницы или раздела. Может содержать логотип, навигацию, поиск, заголовок:

<!-- Шапка всей страницы -->
<header>
  <a href="/" aria-label="На главную">
    <img src="/logo.svg" alt="Логотип компании">
  </a>
  <nav aria-label="Основная навигация">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/catalog">Каталог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

<!-- header внутри article — шапка статьи -->
<article>
  <header>
    <h2>Заголовок статьи</h2>
    <time datetime="2026-04-10">10 апреля 2026</time>
  </header>
  <p>Текст...</p>
</article>

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

Блок со ссылками для навигации по сайту или странице. Используй aria-label при нескольких <nav> на странице:

<nav aria-label="Основная навигация">
  <ul>
    <li><a href="/" aria-current="page">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/blog">Блог</a></li>
  </ul>
</nav>

<!-- Вторая навигация -->
<nav aria-label="Хлебные крошки">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog">Каталог</a></li>
    <li><span aria-current="page">MacBook Pro</span></li>
  </ol>
</nav>

<main> — основное содержимое

Уникальный основной контент страницы. На странице должен быть только один <main>:

<main id="main">
  <h1>Заголовок страницы</h1>
  <article>
    <p>Основной контент...</p>
  </article>
</main>
  • Не вкладывай <main> в <header>, <footer>, <aside>, <nav>, <article>, <section>
  • id="main" нужен для skip link

<footer> — подвал

Информация в конце страницы или раздела: копирайт, контакты, ссылки:

<footer>
  <nav aria-label="Подвал">
    <ul>
      <li><a href="/privacy">Политика конфиденциальности</a></li>
      <li><a href="/terms">Условия использования</a></li>
    </ul>
  </nav>
  <address>
    <a href="mailto:info@example.com">info@example.com</a>
  </address>
  <p><small>&copy; 2026 Компания. Все права защищены.</small></p>
</footer>

Полная структура страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Страница | Сайт</title>
</head>
<body>
  <a href="#main" class="skip-link">Перейти к содержимому</a>

  <header>
    <a href="/"><img src="/logo.svg" alt="На главную"></a>
    <nav aria-label="Основная">
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/catalog">Каталог</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <h1>Заголовок</h1>
    <p>Содержимое.</p>
  </main>

  <footer>
    <p>&copy; 2026 Компания</p>
  </footer>
</body>
</html>

Частые ошибки

Ошибка Почему плохо Как правильно
Несколько <main> на странице Невалидно, нарушает структуру Один <main> на страницу
<nav> без aria-label при нескольких навигациях Screen reader не различает их aria-label="Основная навигация"
<header> и <footer> только для стилей Они несут семантику Используй их по назначению
Нет skip link Пользователи Tab проходят всю навигацию Добавляй skip link первым элементом

Связанные темы

Ресурсы