<header>

Syntax

<header>
  <h1>Site Title</h1>
  <nav><!-- navigation links --></nav>
</header>

Examples

<header>
  <h1>Codectionary</h1>
  <nav>
    <a href="/docs">Docs</a>
    <a href="/playground">Playground</a>
  </nav>
</header>

<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>

<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>

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard