<header>

25 января 2023

Что делает тег

Тег <header> — это контейнер для вводной части сайта или набора навигационных ссылок. Обычно он размещается в верхней части веб-страницы или раздела, к которому принадлежит.

Синтаксис тега <header>

<header>
  <h1>Заголовок страницы</h1>
  <nav>
    <ul>
      <li><a href="#">Дома</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакт с нами</a></li>
    </ul>
  </nav>
</header>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <header> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Создание шапки сайта с заголовком страницы:

<header>
  <h1>Добро пожаловать на мой сайт</h1>
</header>

Добавление навигационных ссылок в шапку:

<header>
  <h1>Добро пожаловать на мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Дома</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакт с нами</a></li>
    </ul>
  </nav>
</header>

Добавление логотипа:

<header>
  <img src="logo.png" alt="Логотип моего сайта">
  <h1>Добро пожаловать на мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Дома</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакт с нами</a></li>
    </ul>
  </nav>
</header>

Добавление фонового изображения:

<header style="background-image: url(header-bg.jpg);">
  <h1>Добро пожаловать на мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Дома</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакт с нами</a></li>
    </ul>
  </nav>
</header>

Создание «липкого» заголовка:

<header style="position: sticky; top: 0;">
  <h1>Добро пожаловать на мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Дома</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакт с нами</a></li>
    </ul>
  </nav>
</header>

Для чего использовать тег <header>

Создать шапку веб-страницы или всего сайта.
Создать шапку или заголовок раздела.
Сделать фиксированную шапку. Она останется неподвижной в верхней части страницы, даже когда пользователь прокрутит страницу вниз.

Атрибуты тега <header>

У тега <header> нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <header> следует использовать только для разметки верхней части веб-страницы или раздела документа. Он не должен использоваться для разметки других типов содержимого: изображений, абзацев или списков.

Нюансы

Если на странице несколько заголовков, каждый нужно выделить отдельным тегом <header>.
Если <header> содержит несколько разделов или уровней содержимого, каждый раздел или уровень выделяется соответствующими тегами HTML, например, <nav> или <h2>.

Поддержка браузерами

Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.

Альтернативные теги

Тег <header> обычно используется для выделения верхней части веб-страницы, но есть и другие теги, которые можно использовать вместо него: <div> и <section>.

Чем заменить тег

Использовать тег <div> или <section> с соответствующими именами классов и стилями CSS.
Использовать другие HTML-теги, такие как <h1> или <nav>, в зависимости от конкретного содержания и расположения раздела заголовка.