structure block

<header>

Représente l'en-tête d'une page ou d'une section : logo, titre du site, navigation principale, barre de recherche.

Description

L’élément <header> est un contenant sémantique pour l’en-tête d’une page ou d’une section. Utilisé au niveau du <body>, il représente l’en-tête de la page entière. Utilisé à l’intérieur d’un <article> ou d’une <section>, il représente l’en-tête de ce bloc.

Syntaxe

<header>
  <h1>Nom du site</h1>
  <nav>…</nav>
</header>

Exemples

En-tête de site avec logo et navigation :

<header>
  <a href="/" aria-label="Accueil">
    <img src="/logo.svg" alt="Mon site">
  </a>
  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/produits">Produits</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

En-tête d’un article :

<article>
  <header>
    <h2>Titre de l'article</h2>
    <p>Publié le <time datetime="2025-01-15">15 janvier 2025</time></p>
  </header>
  <p>Contenu de l'article…</p>
</article>

Notes

<header> vs <head> : <head> est la section de métadonnées invisible ; <header> est un élément visible dans le <body>.

Landmark ARIA : un <header> en enfant direct de <body> crée automatiquement un landmark banner pour les technologies d’assistance. À l’intérieur d’une section, ce landmark ne s’applique pas.

Support navigateurs

Chrome5+ · Firefox4+ · Safari5+ · Edge12+