Cours HTML / Associer une image et sa légende avec figure et figcaption

figure regroupe du contenu autonome tel qu'une image, un graphique ou un exemple de code, et figcaption donne à cette figure une légende visible. Toutes les images n'ont pas besoin de ces éléments. Utilisez-les lorsque le contenu et son explication appartiennent ensemble en tant qu'unité.

Gardez une image et sa légende ensemble

Une photo de voyage et son emplacement ou contexte peuvent former une figure. Placez figcaption comme premier ou dernier enfant de figure. Utilisez le même exemple d'image téléchargeable et la configuration du chemin que Images : img, texte alternatif et dimensions.

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
       width="960" height="540">
  <figcaption>Figure : le lac et l’arbre utilisés dans cette leçon</figcaption>
</figure>

Si l'image dépasse la largeur du contenu, mettez ce CSS dans l'élément style du head. Modifier la légende ne change pas automatiquement le texte alternatif, donc vérifiez chacun indépendamment.

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

Placez l'exemple de 960px de la leçon sur les images à côté du fichier HTML, puis mettez ce code à l'intérieur du body. Le nom du fichier est html-image-sample-lake-tree-960-v1.webp et sa taille réelle est de 960×540 pixels. La légende apparaît en dessous ; déplacez figcaption à la position du premier enfant pour la mettre au-dessus.

Le texte alternatif et les légendes ont des fonctions différentes

Le texte alt transmet les informations ou la fonction de l'image lorsque celle-ci ne peut pas être perçue. Le figcaption visible fournit un titre, une source ou un contexte pour tout le monde. Répéter exactement la même phrase dans les deux peut créer une lecture redondante. Dans cet exemple, l'attribut alt décrit l'information visible et la légende identifie son rôle comme exemple de leçon. Examinez la fonction de l'image en même temps que l'utilisation du clavier dans Principes de base de l'accessibilité : Titres, Liens, Images et Clavier.

Pour une image purement décorative, envisagez alt="", mais vérifiez d'abord que les informations importantes sont disponibles ailleurs. Un graphique doit transmettre sa tendance principale ou son résultat, et non simplement l'expression « graphique à barres ». Si ses données nécessitent une explication plus longue, fournissez-la dans un texte ou un tableau à proximité et laissez le texte alternatif guider les lecteurs vers celui-ci. L'arbre de décision W3C WAI pour le texte alternatif aide à ce choix.

Quand peut-on omettre la figure ?

Une image ordinaire dans le flux d'un paragraphe n'a pas besoin de figure si elle n'a pas de légende ou de référence séparée. Un diagramme discuté comme « la figure suivante », ou un exemple de code avec légende, est un candidat plus approprié. Une figure peut contenir plus qu'une image. Voir la référence de figure sur MDN pour son modèle de contenu.

Pour lier une source dans la légende, remplacez le figcaption précédent comme suit. Ce lien mène à la leçon fournissant le fichier exemple réel. Pour une image différente, identifiez son véritable créateur/source et vérifiez ses conditions d'utilisation ; la simple attribution ne donne pas la permission.

<figcaption>Source de l’image d’exemple : <a href="https://www.codingfactory.net/fr/17947">le fichier fourni dans la leçon sur les images</a>.</figcaption>

Le texte source et le lien apparaissent sous l'image, tandis que l'attribut alt continue de décrire l'arbre, le lac et les montagnes. Ne répétez pas tous les détails de l'attribution dans l'alt.

Si le résultat semble incorrect

Les navigateurs peuvent ajouter des marges par défaut autour de figure. Vérifiez son CSS margin avant de modifier la structure HTML. Si l'image est manquante, vérifiez le nom du fichier et le chemin relatif. Si la légende est manquante, assurez-vous que figcaption est à l'intérieur de figure et que les balises de fermeture sont présentes. Une légende ne fournit pas automatiquement un texte alternatif approprié ; vérifiez les deux séparément.