<h1>-<h6>
Des titres à six niveaux, du plus important h1 au moins important h6. Ensemble, ils forment le plan de la page.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<h1>Cours JavaScript</h1>
<h2>Module 1 : les variables</h2>
<h3>Déclarer des variables</h3>
<h3>Nombres et chaînes de caractères</h3>
<h2>Module 2 : les fonctions</h2>Définition et utilisation
#Les éléments de <h1> à <h6> marquent des titres. Le chiffre indique le niveau : <h1> est le titre de toute la page, <h2> marque les chapitres principaux, <h3> leurs sous-chapitres, et ainsi de suite. Ensemble, ils forment le plan du document, une sorte de table des matières.
Les moteurs de recherche ne sont pas les seuls à s’appuyer sur ce plan. De nombreux utilisateurs de lecteurs d’écran parcourent une page en passant de titre à titre, de la même façon qu’une personne voyante balaie les sous-titres du regard. C’est pourquoi vous devez choisir le niveau d’un titre selon sa place dans la structure, et non selon la taille de la police, que vous réglerez de toute façon en CSS.
Les règles sont simples. Une page devrait avoir un seul <h1> décrivant son sujet. En descendant, ne sautez pas de niveau : après <h2> vient <h3>, pas directement <h4>. Vous pouvez en revanche remonter d’autant de niveaux que vous voulez, par exemple de <h4> à <h2>.
Les navigateurs mettent les titres en gras et leur donnent une taille allant de 2em pour <h1> à 0.67em pour <h6>. N’utilisez pas un titre juste pour obtenir un texte grand et gras, par exemple pour un slogan publicitaire. Un paragraphe stylisé en CSS suffit pour cela.
Syntaxe
#<h1>Titre de la page</h1>
<h2>Chapitre</h2>
<h3>Sous-chapitre</h3>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<h1>Titre h1</h1>
<h2>Titre h2</h2>
<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6><article>
<h2 style="font-size: 1rem; margin: 0;">Cours Python</h2>
<p style="margin: 4px 0 0;">Le petit titre d’une carte reste un h2, car c’est ce que demande la structure de la page.</p>
</article>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
}
h1 { font-size: 2em; margin-block: 0.67em; }
h2 { font-size: 1.5em; margin-block: 0.83em; }
h3 { font-size: 1.17em; margin-block: 1em; }
h4 { font-size: 1em; margin-block: 1.33em; }
h5 { font-size: 0.83em; margin-block: 1.67em; }
h6 { font-size: 0.67em; margin-block: 2.33em; }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
#- Chaque page devrait avoir un
<h1>avec son sujet principal. - Ne sautez pas de niveau en descendant.
<h3>vient après<h2>, même si vous préférez l’apparence de<h4>. - Réglez l’apparence d’un titre en CSS. Le niveau doit découler de la structure du contenu, pas de la taille de la police.
Entrées associées
#- <hgroup>Regroupe un titre avec un sous-titre, un slogan ou un surtitre.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- <p>Un paragraphe de texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.