Les balises de titre (h1 à h6)

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

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.