Les titres donnent une structure à votre page. Ils indiquent aux navigateurs, aux moteurs de recherche et aux lecteurs d’écran comment votre contenu est organisé — pas seulement à quoi il ressemble.
Le HTML possède six balises de titre, de <h1> à <h6>. <h1> est la plus grande et la plus importante ; <h6> est la plus petite. Chaque balise possède une taille et une épaisseur par défaut différentes.
<h1>Titre de la page</h1>
<h2>Section principale</h2>
<h3>Sous-section</h3>
<h4>Sous-sous-section</h4>
<h5>Titre mineur</h5>
<h6>Le plus petit titre</h6>
En pratique, la plupart des pages utilisent seulement <h1>, <h2> et <h3>. Il est rare d’avoir besoin d’aller plus loin.
Le <h1> est le titre principal de la page — il ne devrait y en avoir qu’un seul. Pensez-y comme au titre sur la couverture d’un livre. Toutes les autres sections utilisent <h2> ou un niveau inférieur.
<h1>Mon blogue de cuisine</h1>
<h2>Recettes de déjeuner</h2>
<p>Commencez votre journée avec ces idées.</p>
<h2>Recettes de souper</h2>
<p>Des repas simples pour les soirs de semaine.</p>
Erreur fréquente : utiliser plusieurs balises <h1> simplement parce qu’elles sont grandes. Si vous avez besoin d’un texte plus grand, utilisez le CSS — n’utilisez pas incorrectement les niveaux de titres.
Les titres doivent être imbriqués dans l’ordre. Ne passez pas directement de <h2> à <h4> — cela peut perturber les technologies d’assistance et nuire au SEO.
<!-- Correct : les niveaux suivent l’ordre -->
<h2>Déjeuner</h2>
<h3>Œufs</h3>
<h3>Crêpes</h3>
<!-- Incorrect : le h3 est complètement ignoré -->
<h2>Déjeuner</h2>
<h4>Œufs</h4>
Il peut être tentant de choisir un niveau de titre selon la taille visuelle souhaitée. Évitez cela. Les niveaux de titres ont une signification sémantique — ils décrivent la structure du document, pas le design visuel. Utilisez le CSS pour contrôler la taille.
<!-- Incorrect : utiliser h3 juste parce que “ça a l’air correct” -->
<h3>Contactez-nous</h3>
<h3>Politique de confidentialité</h3>
<h3>Conditions d’utilisation</h3>
<!-- Correct : tous sont des liens principaux, donc h2 est approprié -->
<h2>Contactez-nous</h2>
<h2>Politique de confidentialité</h2>
<h2>Conditions d’utilisation</h2>
Ajoutez ceci à votre index.html et observez comment le navigateur affiche chaque niveau :
<body>
<h1>Ma première page structurée</h1>
<h2>À propos de moi</h2>
<p>Un court paragraphe à propos de vous.</p>
<h2>Mes passe-temps</h2>
<h3>Lecture</h3>
<p>Les livres que j’aime.</p>
<h3>Programmation</h3>
<p>Les projets sur lesquels je travaille.</p>
</body>
Remarquez comment la page possède maintenant une hiérarchie visuelle claire — et si vous l’ouvriez avec un lecteur d’écran, celui-ci annoncerait chaque niveau de titre pendant la navigation.
| Balise | Rôle |
|---|---|
<h1> | Titre principal de la page — un seul par page |
<h2> | Section principale |
<h3> | Sous-section à l’intérieur d’un h2 |
<h4> – <h6> | Niveaux plus profonds — à utiliser rarement |