Balise HTML <header>
La balise <header> définit l'en-tête d'une page ou d'une section. Elle contient généralement un logo, une barre de recherche, des liens de navigation, etc.
Cette balise n'introduit pas de nouvelle section dans le plan. Un élément <header> contient généralement un titre (un <h1>–<h6> élément) pour la section environnante. Cependant, ce n'est pas obligatoire.
La balise <header> fait partie des éléments HTML5. Dans un document HTML, vous pouvez utiliser plusieurs balises <header>. Elles sont généralement placées à l'intérieur des éléments <body>, <article> ou <section>.
DANGER
Il n'est pas autorisé de placer la balise <header> à l'intérieur des <footer> et <address> éléments, ni dans une autre balise <header>.
Syntaxe
La balise <header> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<header>) et la balise de fermeture (<​/header>).
Exemple de la balise HTML <header> :
Exemple de la balise HTML <header>
<!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>Résultat
Exemple de la balise HTML <header> avec les propriétés CSS :
Exemple de la balise HTML <header> avec les 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.
Comment styliser une balise HTML <header>
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Pratique
Quelle affirmation est vraie concernant la balise HTML <header> selon le contenu de l'URL spécifiée ?