🖼️ Phase 6 · Images & Media🟢 BeginnerMODULE 18

Figure & Caption

⏱️ 11 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress51%

🎯 What you'll learn: Grouping an image with its caption using <figure> and <figcaption> — the semantically correct pattern for photos, diagrams, and code snippets with captions.

Section 1

figure Groups Content With Its Caption

<figure> wraps self-contained content — usually an image — along with an optional <figcaption> that describes it. The pairing is semantically linked: assistive technology understands the caption belongs to that specific content.

figure-basic.html

HTML

<figure>
  <img src="chart.png" alt="Bar chart of quarterly revenue" width="400" height="250">
  <figcaption>Fig. 1 — Revenue grew 18% quarter over quarter.</figcaption>
</figure>

📊

Fig. 1 — Revenue grew 18% quarter over quarter.

Section 2

alt vs figcaption — Different Jobs

These two often get confused. alt describes what the image literally shows, for when the image can't be seen. figcaption adds context, commentary, or a citation — visible to everyone, sighted or not.

alt-vs-figcaption.html

HTML

<figure>
  <img src="team.jpg"
       alt="Five people standing in front of a whiteboard"
       width="500" height="300">
  <figcaption>The BitWithBite team at the 2026 planning offsite.</figcaption>
</figure>

💡

They describe different things

alt = "what's literally in the picture." figcaption = "why this picture is here / what it means." A good figcaption often can't stand in for alt text, and vice versa — they're not redundant.

Section 3

figcaption Can Go First

figcaption doesn't have to come after the image — placing it first, before the image, is equally valid and sometimes reads better (a caption that introduces what you're about to see).

figcaption-first.html

HTML

<figure>
  <figcaption>Before and after: the homepage redesign</figcaption>
  <img src="redesign.jpg" alt="Split screen comparing old and new homepage layouts" width="500" height="280">
</figure>

Section 4

figure Isn't Just for Images

figure can wrap a code snippet, a quote, a chart built with SVG, or any standalone unit of content referenced from the main text — anything that could be moved to an appendix without breaking the flow of the article.

figure-code.html

HTML

<figure>
  <pre><code>function greet() {
  console.log("Hello!");
}</code></pre>
  <figcaption>Listing 1 — a minimal greeting function</figcaption>
</figure>

🧩 Knowledge Check — Lesson 18

5 questions to test your figure/figcaption knowledge.

1. What does <figure> do?

2. What's the key difference between alt and figcaption?

3. Can figcaption appear before the image inside a figure?

4. Can <figure> wrap something other than an image?

5. When should you use <figure> instead of a plain <img> with a nearby <p>?

💪

Coding Challenge — Lesson 18

Apply what you learned · Beginner Level

Challenge: Build a Photo Essay Section

Create 3 <figure> elements, each with an image and a figcaption:

1. A "before" photo with a caption describing the starting state
2. An "after" photo with a caption describing the result
3. A code snippet wrapped in figure with a figcaption acting as a listing number/title

💡 Show hints if you're stuck

Each figure needs its own alt text on the img AND its own figcaption — they shouldn't just repeat each other
Code figure: <figure><pre><code>...</code></pre><figcaption>...</figcaption></figure>

Finished this lesson?

Mark it complete to track your progress.

Module 18 of 62Phase 6 — Images & Media

Figure & Caption

figure Groups Content With Its Caption

alt vs figcaption — Different Jobs

figcaption Can Go First

figure Isn't Just for Images

Lesson 18 Complete!