L'élément HTML <header> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : L'élément <header> n'a pas de contenu sectionné et ne peut donc pas introduire une nouvelle section dans le plan du document. Toutefois, un élément <header> contient généralement les titres associés (éléments <h1> <h6>) bien que ce ne soit pas obligatoire.
Notes d'utilisation
Bien que l'élément <header> ne fasse pas partie de la spécification HTML avant HTML5, il existait de façon implicite depuis les premières versions. En consultant le premier site web, on peut voir un exemple d'un usage analogue à <head>. Ce nom (head) fut ensuite attribué via la spécification et a permis d'utiliser <header> pour un autre rôle.
Attributs
Comme tous les éléments HTML, cet élément possède les attributs universels.
Exemples
En-tête de page
HTML
<header> <h1>Titre principal</h1> <img src="mdn-logo-sm.png" alt="MDN logo"> </header>
Résultat
En-tête pour un article
HTML
<article>
<header>
<h2>La planète Terre</h2>
<p>Publié le <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 <footer> ou <header> |
| Omission de balises | Aucune, la balise d'ouverture et la balise 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ôles ARIA autorisés | group, presentation |
| Interface DOM | HTMLElement |
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| HTML Living Standard La définition de '<header>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<header>' dans cette spécification. |
Recommendation |
Compatibilité des navigateurs
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
header | Chrome Support complet 5 | Edge Support complet 12 | Firefox Support complet 4 | IE Support complet 9 | Opera Support complet 11.1 | Safari Support complet 4.1 | WebView Android Support complet Oui | Chrome Android Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet 11.1 | Safari iOS Support complet 4.2 | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet