<header> HTML-элемент заголовка

Элемент <header> HTML представляет вводное содержимое, обычно группу вводных или навигационных элементов. Он может содержать элементы заголовков, а также логотип, форму поиска, имя автора и другие элементы.

Попробуйте

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>
    I love beagles <em>so</em> much! Like, really, a lot. They're adorable and
    their ears are so, so snugly soft!
  </p>
</article>

.logo {
  background: left / cover
    url("/shared-assets/images/examples/puppy-header.jpg");
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
  font:
    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
    fantasy;
  color: #ff0083;
  text-shadow: black 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

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

Если элемент не вложен в секционирующее содержимое, <main> или элемент с той же ARIA-ролью, что и неявная ARIA-роль этих элементов, то элемент <header> имеет то же значение, что и роль ориентира banner для всего сайта. Он определяет глобальный заголовок сайта, который обычно включает логотип, название компании, функцию поиска и, возможно, глобальную навигацию или слоган. Обычно он располагается в верхней части страницы.

В противном случае, если элемент вложен в один из упомянутых элементов, он теряет статус ориентира и представляет группу вводных или навигационных элементов для окружающего раздела. Обычно он содержит заголовок окружающего раздела (элемент h1 – h6) и необязательный подзаголовок, но это не обязательно.

Историческое использование

Элемент <header> изначально существовал в самом начале HTML для заголовков. Он встречается на самом первом веб-сайте. В какой-то момент заголовки стали <h1> по <h6>, что позволило элементу <header> выполнять другую роль.

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Доступность

Элемент <header> определяет ориентир banner, если он находится в контексте элемента <body>.

Если элемент находится внутри <article>, <main>, <section>, <nav>, <aside> или элемента с той же ARIA-ролью, что и неявная ARIA-роль этих элементов, элемент <header> получает роль generic и больше не считается ориентиром. В этом случае его нельзя пометить с помощью aria-label или aria-labelledby.

Примеры

Заголовок страницы

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

Результат

Заголовок статьи

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

Результат

Техническая сводка

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

Совместимость с браузерами

См. также

• Другие элементы, связанные с разделами: <body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <footer>, <section>, <address>.