HTML тег <header>
Тег <header> определяет шапку страницы или раздела. Описание тега, атрибуты и примеры использования.
Тег <header> определяет вводное содержимое страницы или раздела. Как правило, он содержит логотип, название сайта, поле поиска и навигационные ссылки, например меню <nav>.
Этот тег не создаёт новый раздел в структуре документа. Элемент <header> обычно включает заголовок (элемент <h1>–<h6>) для окружающего раздела, однако наличие заголовка не обязательно.
Тег <header> относится к семантическим элементам HTML5. В одном документе можно использовать несколько тегов <header>. Они, как правило, размещаются внутри элементов <body>, <article> или <section>. Парным элементом для закрывающего содержимого является тег <footer>.
Зачем использовать несколько шапок
На странице может быть несколько элементов <header>, поскольку шапки существуют на разных уровнях:
- Шапка уровня страницы — прямой дочерний элемент
<body>. Она представляет весь документ: логотип сайта, глобальную навигацию, поле поиска. Обычно такая шапка одна. - Шапка уровня раздела — шапка, помещённая внутрь
<article>или<section>. Она вводит только этот блок содержимого, например заголовок, автора и дату публикации одной записи в блоге.
Рассмотрим страницу-индекс блога. В <header> уровня страницы находятся название сайта и главное меню. Каждый пост представлен элементом <article> со своим <header>, содержащим заголовок и метаданные этого поста. Оба являются шапками, но описывают разные области видимости — это помогает браузерам, программам чтения с экрана и поисковым системам понять структуру документа.
Доступность и ориентир banner
Когда <header> является прямым дочерним элементом <body>, вспомогательные технологии представляют его как ARIA-ориентир banner — общесайтовый вводный регион. Пользователи программ чтения с экрана могут перейти к нему напрямую, поэтому добавлять role="banner" вручную не нужно.
Это сопоставление исчезает, когда <header> вложен в <article>, <section>, <main>, <aside> или <nav>. Такая шапка вводит только свой раздел и не считается ориентиром banner. В документе должен быть только один ориентир banner, поэтому используйте единственный <header> уровня страницы как дочерний элемент <body>.
Синтаксис
Тег <header> используется в парах. Содержимое записывается между открывающим (<header>) и закрывающим (</header>) тегами.
Пример HTML-тега <header>
На этой странице две шапки: шапка уровня страницы внутри <body> и шапка уровня раздела внутри <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Пример HTML-тега <header> со свойствами CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Атрибуты
Тег <header> поддерживает глобальные атрибуты и атрибуты событий. Собственных атрибутов у него нет.
Добавление id и class для стилизации
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Связанные теги
<footer>— парный закрывающий элемент для<header>.<main>— основное содержимое документа.<nav>— навигационные ссылки, часто размещаемые внутри шапки.<section>— самостоятельный раздел, который может иметь собственную шапку.<article>— автономное содержимое, которое может иметь собственную шапку.