<header> : l'élément d'en-tête
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <header> représente du contenu introductif, généralement un groupe d'éléments d'introduction ou d'aides à la navigation. Il peut contenir des éléments de titre mais aussi un logo, un formulaire de recherche, le nom d'un·e auteur·ice et d'autres éléments.
Exemple interactif
<header>
<a class="logo" href="#">Chiots mignons Express !</a>
</header>
<article>
<header>
<h1>Beagles</h1>
<time>08/12/2014</time>
</header>
<p>
J'aime <em>beaucoup</em> les beagles ! Vraiment beaucoup. Ils sont
adorables et leurs oreilles sont tellement, tellement douces !
</p>
</article>
.logo {
background: left / cover
url("/shared-assets/images/examples/puppy-header.jpg");
display: flex;
height: 120px;
align-items: center;
justify-content: center;
font:
bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
fantasy;
color: #ff0083;
text-shadow: black 2px 2px 0.2rem;
}
header > h1 {
margin-bottom: 0;
}
header > time {
font: italic 0.7rem sans-serif;
}
Notes d'utilisation
Lorsqu'il n'est pas imbriqué dans du contenu de section, dans un élément HTML <main>, ou dans un élément ayant le même rôle ARIA implicite que ces éléments, l'élément <header> a le même sens que le repère global du site banner. Il définit l'en‑tête global du site, qui comprend généralement un logo, le nom de l'organisation, une zone de recherche et éventuellement la navigation globale ou un slogan. Il se situe en règle générale en haut de la page.
Dans le cas contraire, lorsqu'il est imbriqué dans de tels éléments, il perd son statut de repère et représente un groupe d'éléments introductifs ou d'aides à la navigation pour la section environnante. Il contient en général l'en‑tête de la section environnante (un élément h1 — h6) et éventuellement un sous‑titre, mais ce n'est pas obligatoire.
Usage historique
L'élément <header> existait à l'origine dès les débuts du HTML pour les en‑têtes. On le retrouve sur le tout premier site web. À un moment donné, les en‑têtes sont devenus les éléments <h1> à <h6>, ce qui a permis à <header> de remplir un rôle différent.
Attributs
Cet élément inclut uniquement les attributs universels.
Accessibilité
L'élément <header> définit un repère banner lorsque son contexte est l'élément <body>.
Lorsqu'il est placé à l'intérieur d'un <article>, d'un <main>, d'un <section>, d'un <nav>, d'un <aside>, ou d'un élément ayant le même rôle ARIA implicite que ces éléments, l'élément <header> a plutôt le rôle generic et n'est plus considéré comme un repère. Dans ce cas, il ne peut pas être étiqueté avec aria-label ni avec aria-labelledby.
Exemples
En-tête de page
<header>
<h1>Titre principal</h1>
<img src="mdn-logo-sm.png" alt="Logo de MDN" />
</header>
Résultat
En-tête d'un article
<article>
<header>
<h2>La planète Terre</h2>
<p>
Publié le mercredi <time datetime="2017-10-04">4 octobre 2017</time> par
Jeanne Smith
</p>
</header>
<p>Nous vivons sur une planète bleue et verte</p>
<p>
<a href="https://example.com/the-planet-earth/">Poursuivre la lecture…</a>
</p>
</article>
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autorisé |
Contenu de flux
mais sans élément descendant qui soit <header> ou <footer>.
|
| Omission de balises | Aucune, les balises d'ouverture et de fermeture sont obligatoires. |
| Parents autorisés |
Tout élément acceptant du
contenu de flux. Il est à noter qu'un élément <header> ne doit pas
descendre d'un élément <address>,
<footer> ou d'un autre élément
<header>.
|
| Rôle ARIA implicite |
banner, ou
generic si l'élément descend d'un
<article>, <aside>,
<main>, <nav> ou
<section> ou d'un élément ayant le rôle
article, complementary, main, navigation ou region.
|
| Rôles ARIA autorisés |
group, presentation ou
none
|
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-header-element |