La balise HTML <header>
La balise <header> définit l'en-tête d'une page ou d'une section. Description, attributs et exemples d'utilisation.
La balise <header> définit le contenu d'introduction d'une page ou d'une section. Elle contient généralement un logo, le titre du site, un champ de recherche et des liens de navigation comme un menu <nav>.
Cette balise n'introduit pas de nouvelle section dans le plan du document. Un élément <header> contient couramment un titre (un élément <h1>–<h6>) pour la section englobante, mais un titre n'est pas obligatoire.
La balise <header> est l'un des éléments sémantiques HTML5. Dans un même document, vous pouvez utiliser plusieurs balises <header>. Elles sont généralement placées à l'intérieur des éléments <body>, <article> ou <section>. L'élément correspondant pour fermer le contenu est la balise <footer>.
Pourquoi utiliser plusieurs en-têtes
Une page peut avoir plusieurs <header> car les en-têtes existent à différents niveaux :
- En-tête de niveau page — un enfant direct de
<body>. Il introduit l'ensemble du document : le logo du site, la navigation globale, un champ de recherche. Il n'y en a généralement qu'un seul. - En-tête de niveau section — un en-tête placé à l'intérieur d'un
<article>ou d'une<section>. Il introduit uniquement ce bloc de contenu, par exemple le titre, l'auteur et la date de publication d'un article de blog.
Imaginez une page d'index de blog. Le <header> de niveau page contient le nom du site et le menu principal. Chaque article est alors un <article> avec son propre <header> portant le titre et les métadonnées de cet article. Les deux sont des en-têtes, mais ils décrivent des portées différentes, ce qui aide les navigateurs, les lecteurs d'écran et les moteurs de recherche à comprendre la structure.
Accessibilité et le point de repère banner
Lorsque <header> est un enfant direct de <body>, les technologies d'assistance l'exposent comme le point de repère ARIA banner — la région d'introduction à l'échelle du site. Les utilisateurs de lecteurs d'écran peuvent y accéder directement, vous n'avez donc pas besoin d'ajouter role="banner" vous-même.
Ce mappage disparaît lorsque le <header> est imbriqué dans un <article>, une <section>, un <main>, un <aside> ou un <nav>. Un tel en-tête n'introduit que sa propre section et n'est pas traité comme le point de repère banner. Un document ne doit avoir qu'un seul point de repère banner, donc conservez un unique <header> de niveau page comme enfant de <body>.
Syntaxe
La balise <header> s'utilise par paires. Le contenu est écrit entre les balises ouvrante (<header>) et fermante (</header>).
Exemple de la balise HTML <header>
Cette page comporte deux en-têtes : un en-tête de niveau page à l'intérieur de <body>, et un en-tête de niveau section à l'intérieur d'un <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Exemple de la balise HTML <header> avec des propriétés CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Attributs
La balise <header> prend en charge les attributs globaux et les attributs d'événement. Elle ne possède pas d'attributs qui lui sont propres.
Ajout d'un id et d'une class pour le style
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Balises associées
<footer>— l'élément de fermeture correspondant à<header>.<main>— le contenu principal du document.<nav>— les liens de navigation, souvent placés à l'intérieur d'un en-tête.<section>— une section autonome qui peut avoir son propre en-tête.<article>— un contenu autonome qui peut avoir son propre en-tête.