<header>

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émentHTML<header> représente du contenu introductif, généralement 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, le nom d'auteur, etc.

Exemple interactif

<header>  <a href="#">Cute Puppies Express!</a></header><article>  <header>    <h1>Beagles</h1>    <time>08.12.2014</time>  </header>  <p>    I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and    their ears are so, so snugly soft!  </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: #000 2px 2px 0.2rem;}header > h1 {  margin-bottom: 0;}header > time {  font: italic 0.7rem sans-serif;}

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 ducontenu 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`, ouaucun rôle correspondant si l'élément`<header>` descend d'un élément`<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`

Notes d'utilisation

L'élément<header> n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans lastructure. 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 cen'est pas obligatoire.

Usage historique

Bien que l'élément<header> ne fasse pas partie de la spécification HTML avantHTML5, il existait de façon implicite depuis les premières versions. Comme on le voit surle premier site web, il était initialement 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.

<header>  <h1>Titre principal</h1>  <img src="mdn-logo-sm.png" alt="Logo de MDN" /></header>

Résultat

En-tête d'un article

html

<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

Accessibilité

L'élément<header> définit un point de repèrebanner lorsque son contexte est un élément<body>. Lorsqu'un élément HTML<header> descend de certains éléments (tels que<article>,<aside>,<main>,<nav> ou<section>), il n'est pas considéré comme un repèrebanner.