Docs HTML exécutables : Balise header

Q: Quelle est la différence entre head et header en HTML ?

est la partie invisible du document, avec le , les balises et les liens vers les feuilles de style, et il y en a exactement un. est un contenu visible dans , et une page peut en avoir plusieurs.

Q: Une page peut-elle avoir plusieurs éléments header ?

Oui. Une page a généralement un en-tête de site, et chaque ou peut avoir son propre pour son titre et ses informations. Seul un header qui n'est pas dans article, aside, main, nav ou section compte comme bannière de la page pour les lecteurs d'écran.

Q: Comment garder un header en haut lors du défilement ?

Donnez-lui position: sticky; top: 0; plus une couleur de fond et un z-index, pour que le contenu défile en dessous. Sticky ne fonctionne que tant que le parent du header est plus haut que le header, et un ancêtre avec overflow: hidden l'empêche de rester collé à la page.

Comment faire un header en HTML

Entourez le haut de votre page (logo, nom du site, menu principal) d'un élément <header>. C'est une boîte bloc sans apparence par défaut, donc quelques lignes de CSS en font une barre :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto sur le logo repousse le menu et le bouton à l'autre bout de la barre. Supprimez l'élément <style> et vous avez toujours un header : c'est la balise qui en fait un, pas le fond sombre.

header, head ou h1

Trois noms qui se ressemblent et font des choses différentes :

Élément	Où	Visible	Combien
`<head>`	Directement dans `<html>`, avant `<body>`	Non : contient `<title>`, `<meta>`, `<link>`	Exactement un
`<header>`	Dans `<body>`	Oui : contenu d'introduction d'une page ou d'une section	Autant que nécessaire
`<h1>` à `<h6>`	N'importe où dans `<body>`	Oui : un titre	Autant que nécessaire

Le <head> ci-dessous définit le titre de la page qu'un navigateur affiche dans son onglet. Tout ce que vous voyez dans l'aperçu vient de <body> :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Un header contient souvent un titre, mais ce n'est pas obligatoire, et un titre n'a pas besoin d'un header autour de lui.

Des header dans les articles

<header> introduit l'article ou la section la plus proche, pas seulement la page. Une liste d'articles de blog où chaque article a son propre header est valide et courante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Pour les lecteurs d'écran, seul le header de la page (qui n'est pas dans article, aside, main, nav ou section) devient le repère banner. Les header des articles sont de simples groupes, donc vous ne vous retrouvez pas avec plusieurs bannières.

Header fixe au défilement

position: sticky garde le header en haut pendant que le contenu en dessous défile. Faites défiler l'intérieur de la boîte ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Trois détails le font fonctionner : top: 0 (sticky ne fait rien sans décalage), une couleur de fond (sinon les lignes se voient au travers) et z-index pour que le contenu positionné ne se dessine pas par-dessus. Sur une vraie page, la boîte qui défile est la page elle-même, donc le header se place directement dans <body>.

Un header en position: fixed reste aussi en place, mais il sort du flux de la page, donc le contenu glisse dessous et a besoin d'un padding en haut. Sticky garde sa place dans la mise en page.

Ce qu'on peut mettre dans un header

Un header peut contenir presque n'importe quel contenu : titres, image de logo, <nav>, formulaire de recherche, bouton. Il ne peut pas contenir un autre <header> ni un <footer>, et il ne peut pas se trouver dans un <footer>, une <address> ou un autre <header>.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Quand le logo est un lien vers la page d'accueil, son texte alt doit dire où mène le lien (« Acme home »), car c'est ce qu'annonce un lecteur d'écran.

Erreurs fréquentes

Confondre <header> et <head>. Les métadonnées vont dans <head> ; le contenu visible jamais.
Utiliser <header> pour chaque titre. Un titre seul n'a pas besoin d'un header autour. Utilisez <header> quand il y a un groupe de contenu d'introduction.
Un header sticky sans fond. Le texte de la page défile visiblement à travers. Définissez un background.
Un sticky qui ne colle pas. Un ancêtre avec overflow: hidden ou overflow: auto devient la boîte de défilement pour sticky, donc le header colle dans cette boîte (ou pas du tout). Vérifiez les ancêtres.
Mettre le menu du site dans une <div> dans le header. Utilisez <nav> pour que les utilisateurs de lecteurs d'écran puissent y accéder directement.

Questions fréquentes

Qu'est-ce que la balise header en HTML ?

<header> est un élément sémantique pour le contenu d'introduction : le logo et le menu d'un site en haut de la page, ou le titre et l'auteur en haut d'un article. C'est une boîte bloc normale, sans style par défaut.

Quelle est la différence entre head et header en HTML ?

<head> est la partie invisible du document, avec le <title>, les balises <meta> et les liens vers les feuilles de style, et il y en a exactement un. <header> est un contenu visible dans <body>, et une page peut en avoir plusieurs.

Une page peut-elle avoir plusieurs éléments header ?

Oui. Une page a généralement un en-tête de site, et chaque <article> ou <section> peut avoir son propre <header> pour son titre et ses informations. Seul un header qui n'est pas dans article, aside, main, nav ou section compte comme bannière de la page pour les lecteurs d'écran.

Faut-il mettre le nav dans le header ?

On peut, et c'est souvent le cas quand le menu principal est en haut de la page. Placer <nav> hors du <header> est aussi valide ; choisissez ce qui correspond à votre mise en page.

Comment garder un header en haut lors du défilement ?

Donnez-lui position: sticky; top: 0; plus une couleur de fond et un z-index, pour que le contenu défile en dessous. Sticky ne fonctionne que tant que le parent du header est plus haut que le header, et un ancêtre avec overflow: hidden l'empêche de rester collé à la page.

Concepts liés