Hiérarchiser les titres
Objectif : Organiser la présentation et les scènes du festival avec des titres de h1 à h3 sans sauter de niveau.
Une page de programme peut contenir plusieurs informations, mais leur importance doit être immédiatement compréhensible. Si les titres ne suivent pas un ordre cohérent, les visiteurs et les outils d’assistance ont du mal à repérer les sections et leurs relations.
Dans cette leçon, vous allez donner une structure claire à la présentation du Festival des Rives et à ses scènes. Vous utiliserez les titres HTML en respectant leur niveau, sans choisir une balise uniquement pour obtenir un effet visuel.
Du titre de la page aux titres de scène
Les éléments h1 à h3 donnent un niveau aux titres. Utilisez h1 pour le sujet principal de la page, h2 pour ses grandes sections et h3 pour un sous-ensemble d’une section. La page du festival a ainsi un titre principal, puis des sections pour la présentation, le programme et l’accès.
Un titre de niveau inférieur précise le sujet de la partie qui le contient. Dans le programme, « Scène de la Rivière — samedi » et « Scène du Jardin — samedi » sont des sous-sections du programme : elles viennent donc après son titre en h2 et utilisent chacune h3. Vous pouvez avoir plusieurs titres de même niveau lorsque les sections sont au même rang.
Écrire les titres dans le bon ordre
La hiérarchie se lit comme un plan : un titre principal ouvre la page, les titres de section développent ce sujet et les sous-titres précisent une section. Ne sautez donc pas directement de h1 à h3. Dans le programme, les titres des scènes sont des sous-titres du programme, et non des rubriques indépendantes au même niveau que celui-ci.
Vous pouvez avoir plusieurs titres h2 à la suite lorsque chacun introduit une section de même importance. En revanche, un h3 doit toujours préciser une partie introduite par un h2. Ici, les sections Présentation, Programme des concerts et Préparer votre venue sont au même niveau ; les deux scènes sont détaillées sous Programme des concerts.
La page du Festival des Rives
Voici la page complète à cet état du projet. Les titres structurent ses parties ; le reste du contenu reprend le programme de référence et sera détaillé dans les leçons consacrées aux paragraphes, aux listes, aux liens et aux images. Enregistrez ce document dans index.html à la racine du projet.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Festival des Rives — Programme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
<header class="festival-page__entete">
<h1>Festival des Rives</h1>
<p>Deux jours de musique au cœur de la ville.</p>
<nav class="festival-page__navigation" aria-label="Navigation principale">
<ul>
<li><a class="festival-page__lien" href="#presentation">Présentation</a></li>
<li><a class="festival-page__lien" href="#programme">Programme</a></li>
<li><a class="festival-page__lien" href="#acces">Accès</a></li>
</ul>
</nav>
</header>
<main class="festival-page__contenu">
<section class="festival-page__presentation" id="presentation">
<h2>Un festival local et convivial</h2>
<p>Retrouvez des artistes de la région et des découvertes musicales dans le parc des Rives.</p>
<img class="festival-page__image" src="assets/festival-scene.jpg" alt="La scène principale installée dans le parc, devant un public réuni en soirée">
<p>Pour découvrir les initiatives de la ville, consultez le <a class="festival-page__lien" href="https://www.example.org/">site de la mairie</a>.</p>
</section>
<section class="festival-page__programme" id="programme">
<h2>Programme des concerts</h2>
<section class="festival-page__scene" aria-labelledby="scene-riviere">
<h3 id="scene-riviere">Scène de la Rivière — samedi</h3>
<ul>
<li class="festival-page__horaire"><time datetime="2025-06-14T18:00">18 h</time> — Les Lucioles</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T20:00">20 h</time> — Rivage Sonore</li>
</ul>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ul>
<li class="festival-page__horaire"><time datetime="2025-06-14T19:00">19 h</time> — Trio des Pins</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T21:00">21 h</time> — Les Échos</li>
</ul>
</section>
</section>
<section class="festival-page__acces" id="acces">
<h2>Préparer votre venue</h2>
<p>Le festival se déroule au parc des Rives, accessible à pied depuis la gare centrale.</p>
<ul>
<li>Adresse : 12, avenue du Parc, 00000 Ville-sur-Rive.</li>
<li>Entrée gratuite dans la limite des places disponibles.</li>
<li>Un stationnement vélo est disponible près de l'entrée.</li>
</ul>
<p><a class="festival-page__lien" href="#presentation">Retour à la présentation</a></p>
</section>
</main>
<footer class="festival-page__pied">
<p>Festival des Rives — informations susceptibles d'être mises à jour.</p>
</footer>
</body>
</html>Dans le fichier, repérez le parcours des titres : h1 pour le festival, h2 pour chacune des trois grandes sections, puis h3 pour chaque scène du programme. Les deux titres de scène sont au même niveau, car ils décrivent deux parties parallèles de la même section. La navigation ne modifie pas cette hiérarchie : elle donne accès aux sections, tandis que les titres en indiquent l’organisation.
Conserver la feuille de style du projet
Le document lie déjà style.css. Voici le fichier complet correspondant à cet état du projet : il conserve les variables autorisées et fournit une règle de base ainsi que des règles pour les éléments de structure déjà utilisés. Ces règles CSS ne changent pas le niveau des titres ; celui-ci reste défini par les éléments HTML.
:root {
--festival-couleur-texte: #202124;
--festival-couleur-fond: #ffffff;
--festival-couleur-accent: #235347;
--festival-espacement: 1rem;
--festival-espacement-large: 2rem;
--festival-rayon: 0.5rem;
--festival-police: Arial, sans-serif;
--festival-taille-texte: 1rem;
}
.festival-page {
color: var(--festival-couleur-texte);
background-color: var(--festival-couleur-fond);
font-family: var(--festival-police);
font-size: var(--festival-taille-texte);
}
.festival-page__entete,
.festival-page__contenu,
.festival-page__presentation,
.festival-page__programme,
.festival-page__scene,
.festival-page__acces,
.festival-page__pied {
margin-block: var(--festival-espacement);
}
.festival-page__navigation,
.festival-page__lien {
color: var(--festival-couleur-accent);
}
.festival-page__horaire {
margin-block: var(--festival-espacement);
}
.festival-page__image {
border-radius: var(--festival-rayon);
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
À retenir
- Réservez
h1au sujet principal de la page. - Utilisez
h2pour les grandes sections eth3pour leurs sous-sections. - Ne sautez pas de niveau : une scène dépend ici de la section Programme des concerts.
- Choisissez le niveau d’un titre selon sa place dans le plan, pas selon son apparence.
Dans la prochaine leçon, vous rédigerez les informations de la présentation et de l’accès en organisant le contenu en paragraphes.