<header>

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.

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

Notes d'utilisation

L'élément <header> n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls structure. Cela dit, un élément <header> est généralement destiné à contenir l'en-tête de la section environnante (un élément h1-h6), mais ce n'est pas obligatoire.

Usage historique

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, il était originellement utilisé comme l'élément <head>. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à <header> d'être libre de remplir un rôle différent par la suite.

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

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
headerChrome Support complet 5Edge Support complet 12Firefox Support complet 4IE Support complet 9Opera Support complet 11.1Safari Support complet 5WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11.1Safari iOS Support complet 4.2Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi