HTML <header> Tag
The <header> tag defines the header for a page or a section. It usually contains a logo, search, navigational links, etc.
This tag doesn’t introduce a new section in the outline. A <header> element commonly contains a heading (an <h1>–<h6> element) for the surrounding section. However, this is not required.
The <header> tag is one of the HTML5 elements. In an HTML document, you can use several <header> tags. They are commonly placed inside <body>, <article>, or <section> elements.
DANGER
It is not permitted to place the <header> tag inside the <footer> and <address> elements, and in another <header> tag.
Syntax
The <header> tag comes in pairs. The content is written between the opening (<header>) and closing (</header>) tags.
Example of the HTML <header> tag:
Example of the HTML <header> Tag
<!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>Result
Example of the HTML <header> tag with the CSS properties:
Example of the HTML <header> Tag with CSS Properties:
<!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>Attributes
The <header> tag supports Global Attributes and Event Attributes.
How to style an HTML <header> Tag
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Practice
What is true about the HTML <header> tag according to the content of the specified URL?