Légender une image
Objectif : Associer une légende visible à l’image de scène du Festival des Rives avec les éléments figure et figcaption.
Une image de scène peut nécessiter un contexte que son texte alternatif ne fournit pas : nom de la scène, lieu de la prise de vue ou moment représenté. Avec figure et figcaption, vous associez ce contexte à l’image et le rendez visible dans la page.
Dans la leçon précédente, vous avez choisi le texte alternatif de l’image pour transmettre son information aux personnes qui ne la voient pas. La légende répond à un autre besoin : elle apporte une précision lisible par tous, placée à proximité de l’image.
Regrouper l’image et sa légende
L’élément figure regroupe un contenu autonome, comme une image, avec une légende éventuelle. À l’intérieur, placez figcaption pour la légende : le navigateur l’affiche comme du texte ordinaire et sa position dans le code établit son association avec le contenu de la figure.
Dans la présentation du Festival des Rives, placez l’image déjà utilisée dans un élément figure, puis ajoutez une légende qui précise ce qu’elle montre. Le chemin src, la classe autorisée et le texte alt restent inchangés ; seule l’image est désormais accompagnée d’une légende.
Page complète mise à jour
Remplacez le contenu de index.html par la version ci-dessous. Elle conserve la structure, les destinations de navigation et les horaires du projet ; la modification de cette leçon concerne uniquement l’association entre l’image et sa légende.
<!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>
<figure>
<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">
<figcaption>La scène principale du Festival des Rives, dans le parc.</figcaption>
</figure>
<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>
</footer>
</body>
</html>Choisir une légende informative
La légende « La scène principale du Festival des Rives, dans le parc. » indique clairement le sujet et le contexte de l’image. Ajustez-la si le fichier représente une scène différente : une légende doit correspondre à l’image réelle, pas à une supposition.
Après avoir enregistré le fichier, ouvrez-le dans le navigateur : la légende doit apparaître près de l’image. La prochaine leçon vous fera assembler les éléments HTML étudiés pour construire la présentation générale du programme.
À retenir
figureregroupe une image et son contexte sous forme de légende.figcaptioncontient la légende visible associée à la figure.- La légende apporte une précision au lectorat ; elle ne remplace pas le texte alternatif de
alt. - Rédigez une légende exacte, adaptée au contenu réel de l’image.