<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> занять другую роль.

html
<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>

Связанные с этим разделом элементы: <body>, <nav>, <article>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <footer>, <section>, <address>.
Разделы и структура документа HTML5.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

<header>

In this article

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

Примечание

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

Атрибуты

Примеры

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

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

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

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

Смотрите также

Help improve MDN