HTML <header> Tag
The <header> tag defines a header of a page or a section. Tag description, attributes and using examples.
The <header> tag defines introductory content for a page or a section. It usually contains a logo, a site title, a search box, and navigational links such as a <nav> menu.
This tag doesn’t introduce a new section in the document outline. A <header> element commonly contains a heading (an <h1>–<h6> element) for the surrounding section, but a heading is not required.
The <header> tag is one of the HTML5 semantic elements. In a single document you can use several <header> tags. They are commonly placed inside <body>, <article>, or <section> elements. The matching element for closing content is the <footer> tag.
Why use multiple headers
A page can have more than one <header> because headers exist at different levels:
- Page-level header — a direct child of
<body>. It introduces the whole document: the site logo, the global navigation, a search field. There is typically only one of these. - Section-level header — a header placed inside an
<article>or<section>. It introduces just that block of content, for example the title, author, and publish date of one blog post.
Consider a blog index page. The page-level <header> holds the site name and main menu. Then each post is an <article> with its own <header> carrying that post's title and metadata. Both are headers, but they describe different scopes, which helps browsers, screen readers, and search engines understand the structure.
Accessibility and the banner landmark
When <header> is a direct child of <body>, assistive technologies expose it as the banner ARIA landmark — the site-wide introductory region. Screen-reader users can jump straight to it, so you do not need to add role="banner" yourself.
That mapping disappears when the <header> is nested inside an <article>, <section>, <main>, <aside>, or <nav>. Such a header introduces only its own section and is not treated as the banner landmark. A document should have only one banner landmark, so keep a single page-level <header> as a child of <body>.
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
This page has two headers: a page-level header inside <body>, and a section-level header inside an <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>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 the Global Attributes and Event Attributes. It has no attributes of its own.
Adding id and class for styling
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Related tags
<footer>— the closing counterpart to<header>.<main>— the dominant content of the document.<nav>— navigation links, often placed inside a header.<section>— a standalone section that can have its own header.<article>— self-contained content that can have its own header.