Français

<header>

Introduce a page or section — and no, it's not just a logo

— 1 min read

  • HTML
  • accessibility
  • semantics
  • structure

<header> — The page header

The <header> element groups introductory content: title, logo, primary navigation. It can appear at page level, but also inside an <article> or a <section>.

When to use it

You want to mark your site header (logo + nav) or an article header (title + date + author). Each context can have its own <header>.

What you gain

Accessibility: at page level, <header> creates a banner landmark. Screen readers announce it and let users jump to it directly. Inside an <article> or a <section>, it receives the sectionheader role: assistive technologies know this is the introduction to that block, not page chrome.

Code example

<header>
  <a href="/">
    <img src="/logo.svg" alt="Bariafuri" width="120" height="40">
  </a>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

Further reading