HTML Academy · Lesson

figure and figcaption

Wrap images in semantic figure containers with captions.

figure and figcaption is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is figure?

The <figure> element marks up self-contained content that is referenced from the main text:

Images with captions
Code listings
Diagrams, charts, and illustrations
Quotations

The key characteristic: if removed from the main flow, the surrounding text would still make sense.

figure with figcaption

<figcaption> provides a caption for the 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 -->

figcaption Position

<figcaption> can be placed before or after the main content:

<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>

Accessibility: alt vs figcaption

Understand the difference:

alt — describes the image content for screen readers and broken images
figcaption — visible caption providing context, source, or explanation

They serve different purposes and should not duplicate each other.

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

Code Listing in figure

Use <figure> for labelled code examples:

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

Quotation in figure

<figure> works great with <blockquote>:

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

Multiple Images in figure

A figure can contain multiple related images:

<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 vs div

When to use <figure> vs <div>:

Use <figure> when content could be moved to an appendix
Use <figure> when you need a visible caption
Use <div> for layout containers or non-self-contained image groups

Linking Figures in Text

Refer to figures from the main text:

<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 Is Not Required for Images

You do not need to wrap every image in <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>

Styling figure and figcaption

Common CSS for 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;
}

Quick Check

What is the key difference between alt text and figcaption?

Recap: figure and figcaption

Figure essentials:

<figure> — self-contained content referenced from main text
<figcaption> — visible caption, first or last child of figure
alt — invisible description for screen readers
figcaption — visible context for all users
Works for images, code, quotes, and charts

Frequently asked questions

Is the “figure and figcaption” lesson free?

Yes — the full text of “figure and figcaption” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “figure and figcaption”?

Wrap images in semantic figure containers with captions. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “figure and figcaption” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy