0Pricing
HTML Academy · Leçon

`figure` et `figcaption` revisités

Utilisez `figure` au-delà des images, notamment pour le code, les graphiques et les citations.

`figure` et `figcaption` revisités est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

figure au-delà des images

L’élément <figure> ne sert pas uniquement aux images : il balise tout contenu autonome auquel le texte principal fait référence :

  • Exemples de code
  • Équations mathématiques
  • Graphiques et diagrammes
  • Citations
  • Fichiers audio et vidéo avec légendes

Extrait de code dans figure

Donnez à vos exemples de code la forme de figures :

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

Audio dans figure

Un fichier audio avec une légende descriptive :

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

Vidéo dans figure

Une vidéo avec une légende décrivant son contenu :

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

Graphique dans figure

Une image de graphique dont la source des données est indiquée dans la légende :

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

Diagramme SVG dans figure

Un diagramme SVG avec une légende :

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

Citation dans figure

Une citation longue présentée comme une figure :

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

alt ou figcaption : rappel

Clarifions encore une fois la distinction :

  • alt — invisible ; remplace l’image pour les lecteurs d’écran ; décrit ce que montre l’image
  • figcaption — visible ; fournit un contexte, une attribution ou une numérotation ; décrit ce que signifie la figure
<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

Positionnement de figcaption

figcaption peut être le premier ou le dernier enfant de figure :

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

Numérotation des figures avec les compteurs CSS

Numérotez automatiquement les figures avec les compteurs CSS :

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

Quand ne pas utiliser figure

Ne placez pas chaque image dans une figure :

  • Images décoratives (alt vide) → utilisez simplement <img alt="">
  • Images purement présentatives → utilisez background-image en CSS
  • Photos d’avatar dans une liste d’utilisateurs → utilisez simplement <img>
  • Logo dans l’en-tête → utilisez simplement <img>

Vérification rapide

Quel enfant de figure fournit une légende visible par tous les utilisateurs ?

Récapitulatif : figure, rappel

Principes essentiels de figure, rappel :

  • <figure> — contenu autonome référencé (images, code, graphiques, audio, citations)
  • <figcaption> — légende visible, placée en première ou en dernière position
  • Le texte alt = description invisible ; figcaption = contexte visible
  • Numérotez automatiquement avec les compteurs CSS
  • Toutes les images n’ont pas besoin d’une figure

Questions Fréquemment Posées

La leçon « `figure` et `figcaption` revisités » est-elle gratuite ?

Oui — le texte complet de « `figure` et `figcaption` revisités » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « `figure` et `figcaption` revisités » ?

Utilisez `figure` au-delà des images, notamment pour le code, les graphiques et les citations. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « `figure` et `figcaption` revisités » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. `aside` : contenu complémentaire
  2. `figure` et `figcaption` revisités
  3. `details` et `summary` : composant d’affichage
  4. Les éléments `progress` et `meter`
← Retour à HTML Academy