HTML Academy · Leçon

figure et figcaption

Entourez les images de conteneurs figure sémantiques avec des légendes.

figure et figcaption est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Qu’est-ce que figure ?

L’élément <figure> balise un contenu autonome auquel le texte principal fait référence :

Images avec légendes
Extraits de code
Schémas, graphiques et illustrations
Citations

La caractéristique essentielle est la suivante : s’il est retiré du flux principal, le texte environnant reste compréhensible.

figure avec figcaption

<figcaption> fournit une légende pour la figure :

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Position de figcaption

<figcaption> peut être placé avant ou après le contenu principal :

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Accessibilité : alt ou figcaption

Comprenez la différence :

alt — décrit le contenu de l’image pour les lecteurs d’écran et les images non chargées
figcaption — légende visible fournissant un contexte, une source ou une explication

Ils ont des fonctions différentes et ne doivent pas se répéter.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Extrait de code dans figure

Utilisez <figure> pour les exemples de code accompagnés d’une légende :

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Citation dans figure

<figure> fonctionne très bien avec <blockquote> :

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Plusieurs images dans figure

Une figure peut contenir plusieurs images associées :

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure ou div

Quand utiliser <figure> ou <div> :

Utilisez <figure> lorsque le contenu pourrait être déplacé dans une annexe
Utilisez <figure> lorsque vous avez besoin d’une légende visible
Utilisez <div> pour les conteneurs de mise en page ou les groupes d’images non autonomes

Référencer des figures dans le texte

Faites référence aux figures depuis le texte principal :

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

figure n’est pas obligatoire pour les images

Vous n’avez pas besoin de placer chaque image dans <figure> :

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Mise en forme de figure et figcaption

CSS courant pour les figures :

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Vérification rapide

Quelle est la différence essentielle entre le texte alt et figcaption ?

Récapitulatif : figure et figcaption

Éléments essentiels de figure :

<figure> — contenu autonome référencé depuis le texte principal
<figcaption> — légende visible, premier ou dernier enfant de figure
alt — description invisible pour les lecteurs d’écran
figcaption — contexte visible pour tous les utilisateurs
Fonctionne pour les images, le code, les citations et les graphiques

Questions Fréquemment Posées

La leçon « figure et figcaption » est-elle gratuite ?

Oui — le texte complet de « figure et figcaption » 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 » ?

Entourez les images de conteneurs figure sémantiques avec des légendes. 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 4 sur 4.

Combien de temps prend la leçon « figure et figcaption » ?

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

← Retour à HTML Academy