HTML-тег <header>
Тег <header> определяет заголовок для страницы или раздела. Обычно он содержит логотип, поиск, навигационные ссылки и т. д.
Этот тег не создает новый раздел в структуре документа. Элемент <header> обычно содержит заголовок (элемент <h1>–<h6>) для окружающего раздела. Однако это не является обязательным.
Тег <header> является одним из элементов HTML5. В HTML-документе можно использовать несколько тегов <header>. Обычно они размещаются внутри элементов <body>, <article> или <section>.
DANGER
Размещение тега <header> внутри элементов <footer> и <address>, а также внутри другого тега <header> запрещено.
Синтаксис
Тег <header> является парным. Содержимое записывается между открывающим (<header>) и закрывающим (</header>) тегами.
Пример использования HTML-тега <header>:
Пример использования HTML-тега <header>
<!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:
Пример использования 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> поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать HTML-тег <header>
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Практика
Что верно относительно HTML-тега <header> согласно содержанию указанной страницы?