<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.
Comparaison point par point
#Visible sur la page
- <header>
- Oui, c’est du contenu visible
- <head>
- Non, ce sont des métadonnées
Nombre par document ou par page
- <header>
- Peut y en avoir plusieurs : pour la page et pour les articles
- <head>
- Exactement un, dans tout le document
Emplacement dans le document
- <header>
- À l’intérieur de
<body>, au début de la page ou d’une section - <head>
- Premier enfant de
<html>, avant<body>
Contenu typique
- <header>
- Logo, navigation, titre, date de publication
- <head>
<title>,<meta>,<link>,<style>,<script>
Rôle pour les technologies d’assistance
- <header>
- Point de repère "banner" (au niveau de la page)
- <head>
- Aucun, invisible pour l’utilisateur
Exemple
#<head>
<meta charset="utf-8">
<title>Cours HTML</title>
</head>Définition et utilisation
#<head> contient les métadonnées du document : <title>, <meta>, <link>, <style> et <script>. Rien de tout cela ne s’affiche directement sur la page. C’est le premier enfant de <html>, toujours avant <body>, et il y en a exactement un dans le document.
<header> est un élément visible, réellement affiché : au niveau de toute la page, c’est généralement le logo, le nom du site et la navigation principale, et à l’intérieur d’un <article> ou d’une <section>, le titre, la date de publication ou l’auteur. Une page peut avoir plusieurs éléments <header>, un pour chaque section.
La règle est simple : tout ce dont le navigateur a besoin avant même d’afficher la page (titre de l’onglet, encodage, feuilles de style) va dans <head>. Tout ce que le visiteur voit au début de la page ou d’une section va dans <header>. Leurs noms proches sont la seule raison pour laquelle on les confond facilement.
Syntaxe
#<head>
<title>...</title>
</head>
<header>
...
</header>Plus d’exemples
#<header>
<a href="/">CodeWorlds</a>
<nav aria-label="Principale"><a href="/cours">Cours</a></nav>
</header><article>
<header>
<h2>Flexbox en 10 minutes</h2>
</header>
<p>Flexbox aligne les éléments sur une seule dimension.</p>
</article>Bonnes pratiques
#<head>et<header>se ressemblent, mais ce sont des éléments différents : l’un est invisible, l’autre visible.- Il y a exactement un
<head>dans le document, mais<header>peut apparaître plusieurs fois : pour la page et pour chaque article. - Les métadonnées, comme le titre de l’onglet ou la description pour les moteurs de recherche, vont toujours dans
<head>, jamais dans<header>.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.