<header>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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>
Заголовок статьи
<article>
<header>
<h2>Планета Земля</h2>
<p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p>
</header>
<p>
Мы живём на сине-зелёной планете, на которой до сих пор так много
неизведанного.
</p>
<p>
<a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a>
</p>
</article>
Спецификации
Specification |
---|
HTML # the-header-element |
Совместимость с браузерами
BCD tables only load in the browser