Créer une navigation vers une scène
Objectif : Faire pointer un lien vers la section consacrée à une scène du festival.
Quand un programme contient plusieurs concerts, vos lecteurs peuvent vouloir accéder directement à la scène qui les intéresse. Vous allez relier les noms des scènes présents dans la navigation aux titres correspondants dans le programme. Le navigateur pourra ainsi faire défiler la page jusqu’à la bonne destination, sans créer une page supplémentaire.
Vous avez déjà créé des liens et utilisé leur attribut href ; reportez-vous aux leçons précédentes pour ces bases. Ici, la destination se trouve dans le même fichier que le lien : vous l’indiquez avec un fragment d’URL, c’est-à-dire le signe # suivi d’un identifiant. Par exemple, href="#scene-riviere" demande au navigateur de chercher dans la page l’élément qui porte cet identifiant.
Associer le lien à sa destination
Pour rendre une destination identifiable, vous lui attribuez un id. Dans le programme du festival, chaque titre de scène possède déjà un identifiant : scene-riviere ou scene-jardin. Le lien et l’identifiant doivent correspondre exactement, caractère pour caractère ; le # se place dans le lien, mais pas dans la valeur de l’attribut id. Un identifiant ne doit apparaître qu’une seule fois dans le document.
Vous ajoutez les deux liens dans la navigation existante. Les identifiants restent portés par les titres h3 des scènes, qui servent déjà à nommer les sections grâce à aria-labelledby. Le clic amène donc le lecteur au titre de la scène choisie, puis il peut lire les concerts placés juste après.
Page complète avec la navigation des scènes
Voici le fichier index.html complet à cet état du projet. La page conserve les liens existants vers la présentation, le programme et l’accès, ainsi que le lien vers la mairie et le lien relatif du pied de page. Les horaires restent présentés dans des listes ordonnées, conformément à l’état obtenu dans les leçons précédentes ; aucun changement de feuille de style n’est nécessaire.
<!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="#scene-riviere">Scène de la Rivière</a></li>
<li><a class="festival-page__lien" href="#scene-jardin">Scène du Jardin</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>
<ol>
<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>
</ol>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ol>
<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>
</ol>
</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>
<p><a class="festival-page__lien" href="index.html">Page du Festival des Rives</a></p>
</footer>
</body>
</html>Tester les destinations
Enregistrez le fichier, puis ouvrez ou actualisez index.html dans votre navigateur. Cliquez sur « Scène de la Rivière » : la page doit se déplacer jusqu’au titre « Scène de la Rivière — samedi ». Faites de même avec « Scène du Jardin » et vérifiez que l’arrivée se fait au bon titre, plutôt qu’à une autre partie du programme.
Vous pouvez aussi contrôler la correspondance directement dans le code : repérez le fragment après le # dans le href, puis recherchez un id de même valeur. Par exemple, href="#scene-jardin" doit correspondre à id="scene-jardin". Si le navigateur ne déplace pas la page, vérifiez l’orthographe, les guillemets et la présence de l’élément cible dans le document.
À retenir
- Attribuez un attribut `id` à l’élément qui doit servir de destination.
- Pointez vers cet identifiant avec un `href` contenant `#` suivi de sa valeur.
- Gardez chaque identifiant unique et vérifiez exactement la correspondance entre lien et destination.
- Testez chaque lien dans le navigateur pour confirmer le déplacement vers la bonne scène.
Dans la prochaine leçon, vous ajouterez une image au programme en indiquant son fichier source.