<header>
L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux sans éléments
<header>et<footer>
Exemple
#<header>
<a href="/">CodeWorlds</a>
<nav aria-label="Principale">
<a href="/fr/formations">Formations</a> ·
<a href="/fr/documentation">Documentation</a> ·
<a href="/fr/collections">Collections</a>
</nav>
</header>Définition et utilisation
#L’élément <header> contient du contenu introductif. Au niveau de toute la page, c’est généralement le logo, le nom du site et la navigation principale. À l’intérieur d’un <article> ou d’une <section>, c’est un titre, une date de publication, un auteur ou un court chapeau.
Une même page peut contenir plusieurs éléments <header>, un pour chaque section ou article. Il ne peut en revanche pas se trouver à l’intérieur d’un <footer>, d’une <address> ni d’un autre <header>.
Un en-tête de page placé directement dans <body> est reconnu par les technologies d’assistance comme un point de repère « banner ». Le même élément imbriqué dans un article ne joue plus ce rôle.
Syntaxe
#<header>
…
</header>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<article>
<header>
<h2>Flexbox en 10 minutes</h2>
<p>Auteure : Léa Dubois · <time datetime="2026-05-02">2 mai 2026</time></p>
</header>
<p>Flexbox dispose les éléments sur une seule dimension : en ligne ou en colonne.</p>
</article>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
header {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#<header>n’est pas la même chose que<head>. Ce dernier contient des métadonnées et ne s’affiche pas sur la page.- Un en-tête seul ne suffit pas comme titre de section. Il vous faut toujours un
<h1>-<h6>à l’intérieur.
Entrées associées
#- <header> vs <head><head> est une section invisible avec les métadonnées de la page, unique dans le document. <header> est un élément visible d’introduction, répétable sur la page.
- <footer>Le pied de page d’une page ou d’une section : auteur, droits d’auteur, liens, coordonnées.
- <nav>Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
- <main>Le contenu principal et unique de la page. Une seule instance visible par page.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.