Syntax
<header>
<h1>Site Title</h1>
<nav><!-- navigation links --></nav>
</header>Examples
Page Header
A typical site-wide header with logo and navigation.
<header>
<h1>Codectionary</h1>
<nav>
<a href="/docs">Docs</a>
<a href="/playground">Playground</a>
</nav>
</header>Article Header
A header scoped to a single article, containing its title and metadata.
<article>
<header>
<h2>Understanding CSS Grid</h2>
<p>Published on March 3, 2026 by Jane Doe</p>
</header>
<p>CSS Grid is a two-dimensional layout system...</p>
</article>Styled Header
A page header with basic styling.
<header style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #1f2937; color: white;">
<strong>Codectionary</strong>
<nav style="display: flex; gap: 16px;">
<a href="#" style="color: white;">Home</a>
<a href="#" style="color: white;">About</a>
</nav>
</header>Best practices
- Use <header> for introductory content, not as a generic styling wrapper — that is what <div> is for
- A page can have more than one <header>, scoped to different sections or articles
- <header> should not be nested inside <footer>, <address>, or another <header>
- Combine with <nav> for the primary site navigation rather than placing links loose inside <header>
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).