<header>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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

Интерактивный пример

<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: #000 2px 2px 0.2rem;
}
header > h1 {
 margin-bottom: 0;
}
header > time {
 font: italic 0.7rem sans-serif;
}

Категории контента	Основной поток, явный контент.
Допустимое содержимое	Основной поток, кроме `<header>` и `<footer>`
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент `<header>` не должен быть потомком элемента `<address>`, `<footer>` или другого элемента `<header>`.
Допустимые ARIA-роли	`group` , `presentation`
DOM-интерфейс	`HTMLElement`

Примечание

Элемент <header> не относится к секционному контенту , а значит не создаёт новый раздел в структуре HTML-документа. При этом элемент <header> обычно должен содержать заголовок ближайшего раздела (элементы h1-h6), но это не обязательно.

Историческое употребление

Несмотря на то, что элемент <header> не попал в спецификации до HTML5, на самом деле, он существовал с самого начала HTML. Первоначально, на самом первом веб-сайте он использовался как элемент <head>. В какой-то момент было принято решение использовать другое имя. Позже, это позволило <header> занять другую роль.

<header>
 <h1>Заголовок главной страницы</h1>
 <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

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

html

<article>
 <header>
 <h2>Планета Земля</h2>
 <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p>
 </header>
 <p>
 Мы живём на сине-зелёной планете, на которой до сих пор так много
 неизведанного.
 </p>
 <p>
 <a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a>
 </p>
</article>