header
The HTML <header> element marks introductory content for a page or sectioning element. It can contain a logo, heading, author information, or navigation.
What you will learn
- What introductory content a
headerrepresents - How to combine a logo, heading, and navigation
- How it differs from
headand generic layout containers
Site header
<header>
<a href="/">Example Site</a>
<nav aria-label="Primary">
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>A site-wide header often introduces the page with branding and primary navigation. Give each navigation group an accessible label when there is more than one.
Article header
<article>
<header>
<h2>A practical guide</h2>
<p>Updated 2026-09-05</p>
</header>
<p>Article content...</p>
</article>A header can belong to an article or another sectioning element. Use it for information that introduces that content, not simply for any box positioned at the top.
Do not confuse it with head
The head element stores document metadata such as the title and stylesheets; it is not visible page content. The header element is visible content inside the body and has a semantic role as an introduction.