English

<header>

Introduire une page ou une section, et non, ce n'est pas juste un logo

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • structure

<header> — L'en-tête

La balise <header> regroupe le contenu introductif : titre, logo, navigation principale. Elle peut apparaître au niveau de la page, mais aussi à l'intérieur d'un <article> ou d'une <section>.

Quand l'utiliser

Tu veux marquer l'en-tête de ton site (logo + nav) ou l'en-tête d'un article (titre + date + auteur). Chaque contexte peut avoir son propre <header>.

Ce que tu gagnes

Accessibilité : au niveau de la page, le <header> crée un banner landmark. Les lecteurs d'écran l'annoncent et permettent de s'y rendre directement. À l'intérieur d'un <article> ou d'une <section>, il reçoit le rôle sectionheader : les technologies d'assistance savent que c'est l'introduction de ce bloc, pas du chrome de page.

Exemple de code

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

Pour aller plus loin