<header>: Элемент заголовка

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

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

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

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

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

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

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

Атрибуты

Этот элемент включает только глобальные атрибуты.

Доступность

Элемент <header> определяет ориентир banner, когда его контекстом является элемент <body>. Элемент заголовка HTML не считается ориентиром типа баннер, когда он является потомком элемента <article>, <aside>, <main>, <nav> или <section>.

Примеры

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

html

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

Результат

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

html

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

Результат

Техническое описание

Категории контента	Потоковый контент, ощущаемый контент.
Разрешенный контент	Потоковый контент, но без `<header>` или `<footer>` потомка.
Пропуск тега	Нет, обязательны как открывающий, так и закрывающий тег.
Разрешенные родительские элементы	Любой элемент, принимающий потоковый контент. Обратите внимание, что элемент `<header>` не должен быть потомком элементов `<address>`, `<footer>` или другого элемента `<header>`.
Неявная роль ARIA	banner, или generic, если является потомком `article`, `aside`, `main`, `nav` или `section` элемента, или элемента с `role=article`, `complementary`, `main`, `navigation` или `region`
Разрешенные роли ARIA	`group`, `presentation` или `none`
Интерфейс DOM	`HTMLElement`

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

Спецификация
Стандарт HTML # the-header-element

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`header`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header