Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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émentHTML<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 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 ducontenu 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 sitebanner. 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émenth1 —h6) et éventuellement un sous‑titre, mais ce n'estpas 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 surle 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 lesattributs universels.
Accessibilité
L'élément<header> définit un repèrebanner 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ôlegeneric et n'est plus considéré comme un repère. Dans ce cas, il ne peut pas être étiqueté avecaria-label ni avecaria-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 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, ougeneric si l'élément descend d'un<article>,<aside>,<main>,<nav> ou<section> ou d'un élément ayant le rôlearticle,complementary,main,navigation ouregion. |
| Rôles ARIA autorisés | group,presentation ounone |
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-header-element |