| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/header | [Back] [Original] |
Get to know MDN better
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'lment d'en-tteCette 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'lment HTML <header> reprsente du contenu introductif, gnralement un groupe d'lments d'introduction ou d'aides la navigation. Il peut contenir des lments de titre mais aussi un logo, un formulaire de recherche, le nom d'une auteurice et d'autres lments.
<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;
}
Lorsqu'il n'est pas imbriqu dans du contenu de section, dans un lment HTML <main>, ou dans un lment ayant le mme rle ARIA implicite que ces lments, l'lment <header> a le mme sens que le repre global du site banner. Il dfinit l'entte global du site, qui comprend gnralement un logo, le nom de l'organisation, une zone de recherche et ventuellement la navigation globale ou un slogan. Il se situe en rgle gnrale en haut de la page.
Dans le cas contraire, lorsqu'il est imbriqu dans de tels lments, il perd son statut de repre et reprsente un groupe d'lments introductifs ou d'aides la navigation pour la section environnante. Il contient en gnral l'entte de la section environnante (un lment h1 h6) et ventuellement un soustitre, mais ce n'est pas obligatoire.
L'lment <header> existait l'origine ds les dbuts du HTML pour les enttes. On le retrouve sur le tout premier site web. un moment donn, les enttes sont devenus les lments <h1> <h6>, ce qui a permis <header> de remplir un rle diffrent.
Cet lment inclut uniquement les attributs universels.
L'lment <header> dfinit un repre banner lorsque son contexte est l'lment <body>.
Lorsqu'il est plac l'intrieur d'un <article>, d'un <main>, d'un <section>, d'un <nav>, d'un <aside>, ou d'un lment ayant le mme rle ARIA implicite que ces lments, l'lment <header> a plutt le rle generic et n'est plus considr comme un repre. Dans ce cas, il ne peut pas tre tiquet avec aria-label ni avec aria-labelledby.
<header>
<h1>Titre principal</h1>
<img src="mdn-logo-sm.png" alt="Logo de MDN" />
</header>
<article>
<header>
<h2>La plante 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 plante bleue et verte</p>
<p>
<a href="https://example.com/the-planet-earth/">Poursuivre la lecture</a>
</p>
</article>
| Catgories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autoris |
Contenu de flux
mais sans lment descendant qui soit <header> ou <footer>.
|
| Omission de balises | Aucune, les balises d'ouverture et de fermeture sont obligatoires. |
| Parents autoriss |
Tout lment acceptant du
contenu de flux. Il est noter qu'un lment <header> ne doit pas
descendre d'un lment <address>,
<footer> ou d'un autre lment
<header>.
|
| Rle ARIA implicite |
banner, ou
generic si l'lment descend d'un
<article>, <aside>,
<main>, <nav> ou
<section> ou d'un lment ayant le rle
article, complementary, main, navigation ou region.
|
| Rles ARIA autoriss |
group, presentation ou
none
|
| Interface DOM | HTMLElement |
| Spcification |
|---|
| HTML # the-header-element |
<body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <footer>, <section>, <address>.Cette page a t modifie le 25 avr. 2026 par les contributeurices du MDN.
<a><abbr><acronym><address><area><article><aside><audio><b><base><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fencedframe><fieldset><figcaption><figure><font><footer><form><frame><frameset><geolocation><h1>-<h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><marquee><menu><meta><meter><nav><nobr><noembed><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><plaintext><pre><progress><q><rb><rp><rt><rtc><ruby><s><samp><script><search><section><select><selectedcontent><slot><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video><wbr><xmp><input><input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month">Valeur d'attribut HTML `<input type="number">`<input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week"><script>Certaines parties de ce contenu sont protges par le droit d'auteur 19982026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.
| Web Proxy Viewer | New URL | Original Page |