Les balises de titre (h1 à h6)
Les balises de titre (h1 à h6)
- 1Les balises h1 à h6 créent une hiérarchie de titres de plus en plus petits et moins importants
- 2h1 est le titre principal d'une page (un seul par page), h2-h6 structurent le contenu
- 3Cette hiérarchie améliore l'accessibilité et aide les moteurs de recherche à comprendre la structure
Introduction : Structurer comme un livre
Imaginez que vous rédigez un manuel scolaire. Vous avez besoin d'un titre principal pour chaque chapitre, de sous-titres pour les sections, et de titres plus petits pour les détails. C'est exactement le rôle des balises de titre en HTML !
La hiérarchie des titres : de h1 à h6
Visualisation de la hiérarchie
Syntaxe et exemples pratiques
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <title>Rapport annuel - Association du Quartier Fleuri</title>
5</head>
6<body>
7 <!-- UN SEUL h1 par page -->
8 <h1>Rapport annuel 2024</h1>
9
10 <!-- Sections principales -->
11 <h2>Activités de l'année</h2>
12 <h3>Événements communautaires</h3>
13 <h4>Fête de printemps</h4>
14 <h4>Marché de Noël</h4>
15 <h3>Projets d'aménagement</h3>
16 <h4>Rénovation du parc</h4>
17 <h5>Phase 1 : Jeux pour enfants</h5>
18 <h5>Phase 2 : Éclairage</h5>
19
20 <h2>Finances</h2>
21 <h3>Recettes</h3>
22 <h3>Dépenses</h3>
23 <h4>Frais de fonctionnement</h4>
24 <h4>Investissements</h4>
25</body>
26</html>Caractéristiques et bonnes pratiques
Tableau comparatif des balises de titre
| Balise | Taille relative | Usage recommandé | Fréquence par page |
|---|---|---|---|
<h1> | La plus grande | Titre principal de la page | 1 seule fois |
<h2> | Grande | Sections majeures | 2-5 fois |
<h3> | Moyenne-grande | Sous-sections | Variable |
<h4> | Moyenne | Détails importants | Variable |
<h5> | Petite | Sous-détails | Rare |
<h6> | La plus petite | Niveau le plus fin | Très rare |
Le saviez-vous ?
Les balises de titre ont été inspirées des machines à écrire et des systèmes de composition typographique des années 1960, où les typographes utilisaient différentes tailles de caractères pour créer une hiérarchie visuelle dans les documents imprimés.
— Histoire de la typographie numérique
Règles importantes à respecter
💡 À retenir : Utilisez UN SEUL h1 par page - c'est le titre principal qui décrit le contenu de toute la page.
⚠️ Attention : Ne sautez pas de niveaux ! N'utilisez pas h4 directement après h2, passez d'abord par h3.
🎯 En pratique : Les moteurs de recherche utilisent la structure des titres pour comprendre et indexer votre contenu. Une hiérarchie claire améliore votre référencement.
Exemple d'erreur courante à éviter
1<!-- ❌ INCORRECT - Structure cassée -->
2<h1>Mon site web</h1>
3<h3>Section importante</h3> <!-- h2 manquant ! -->
4<h2>Détail moins important</h2> <!-- Ordre illogique -->
5
6<!-- ✅ CORRECT - Structure logique -->
7<h1>Mon site web</h1>
8<h2>Section importante</h2>
9 <h3>Sous-section</h3>
10 <h3>Autre sous-section</h3>Impact sur l'accessibilité et le SEO
Avantages d'une structure claire
🎯 En pratique : Les utilisateurs de lecteurs d'écran naviguent souvent en "sautant" de titre en titre. Une structure h1→h2→h3 leur permet de comprendre rapidement l'organisation de votre contenu.
Personnalisation avec CSS
Bien que les balises de titre aient des tailles par défaut, vous pouvez les personnaliser avec CSS :
1/* Personnalisation des titres */
2h1 {
3 font-size: 2.5rem;
4 color: #2c3e50;
5 border-bottom: 3px solid #3498db;
6 padding-bottom: 10px;
7}
8
9h2 {
10 font-size: 2rem;
11 color: #34495e;
12 margin-top: 2rem;
13}
14
15h3 {
16 font-size: 1.5rem;
17 color: #7f8c8d;
18 font-weight: 600;
19}💡 À retenir : Séparez toujours le sens (HTML) de l'apparence (CSS). Les balises de titre définissent la structure, le CSS s'occupe du style.