<header>
The header of a page or a section: logo, heading, navigation.
Syntax
<header>…</header>Examples
A site header with a logo and a menu:
<style>
header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #333; color: white; }
header a { color: white; margin-left: 12px; }
</style>
<header>
<strong>The Bean</strong>
<nav><a href="#">Menu</a><a href="#">Contacts</a></nav>
</header>A header inside an article:
<article>
<header>
<h2>New autumn menu</h2>
<p>Published <time datetime="2026-09-20">September 20</time></p>
</header>
<p>Pumpkin latte is back.</p>
</article>Notes
A <header> can belong to the whole page or to a single <article> or <section>. Do not confuse it with <head>, the service part of the document, or with the <h1>–<h6> headings.
See also
- <nav> — A block of main navigation: the site menu, a table of contents, breadcrumbs.
- <main> — The main content of the page — what the user came for.
- <footer> — The footer of a page or a section: contacts, copyright, links.
- <h1>–<h6> — Headings of six levels: `<h1>` is the main one, `<h6>` the smallest.
Related recipes
In the tutorial
- Semantic markup — The neutral div and span and the meaningful header, nav, main, article, section, aside and footer tags for page structure.