Figures & Captions

Difficulty: Beginner

The <figure> element represents self-contained content that is referenced from the main content flow but could be moved to an appendix, sidebar, or separate page without affecting the main document's meaning. Think of it like a figure in a textbook -- it supplements the text but is not part of the text itself. The <figcaption> element provides a caption or legend for the figure.

While <figure> is most commonly used with images, it is not limited to them. A figure can contain code snippets, diagrams, charts, tables, audio clips, videos, equations, or any content that is referenced as a unit from the surrounding text. The key semantic meaning is that the figure is self-contained and referenced from the main flow. If removing the content would disrupt the document's meaning, it probably should not be a figure.

The <figcaption> element must be a direct child of <figure> and should be either the first or last child element. It provides a visible caption that describes the figure content. Unlike the alt attribute on images (which is for screen readers and when images fail to load), figcaption is visible to all users and typically provides context, attribution, or explanatory text. When both alt and figcaption are present, they should serve different purposes -- alt describes the image content, while figcaption provides context about why it is shown.

Using <figure> and <figcaption> provides semantic meaning that helps both search engines and assistive technologies understand the relationship between the content and its caption. Screen readers announce figures as a distinct content group, and the figcaption is associated with the figure automatically. This is much better than using a <div> with a <p> below it, which has no semantic connection between the image and its description.

Code examples

Basic Figure with Image and Caption

<figure>
  <img src="/images/chart-revenue.png" 
       alt="Bar chart showing quarterly revenue from Q1 to Q4 2024"
       width="600" 
       height="400">
  <figcaption>
    Figure 1: Quarterly revenue growth in 2024, 
    showing a 23% increase from Q1 to Q4.
  </figcaption>
</figure>

The <figure> wraps both the image and its caption. The alt attribute describes what the image looks like (a bar chart), while the figcaption provides analytical context (the 23% growth trend). These serve different purposes and complement each other.

Figure with Code Snippet

<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));
  </code></pre>
  <figcaption>
    Example 3: A simple greeting function using 
    template literals (ES6+).
  </figcaption>
</figure>

Figures are not just for images. Code snippets, especially those referenced in the surrounding text ('as shown in Example 3'), are perfect candidates for the figure element. The figcaption describes what the code demonstrates.

Multiple Images in a Single Figure

<figure>
  <img src="/images/before.jpg" 
       alt="Kitchen before renovation: outdated cabinets and flooring"
       width="400" height="300">
  <img src="/images/after.jpg" 
       alt="Kitchen after renovation: modern white cabinets and hardwood floors"
       width="400" height="300">
  <figcaption>
    Before and after: Kitchen renovation completed 
    in March 2024 by HomeDesign Co.
  </figcaption>
</figure>

A single <figure> can contain multiple images when they form a logical group. The figcaption describes the entire set. Each image still has its own alt text describing its individual content.

Figure with Attribution

<figure>
  <img src="/images/starry-night.jpg" 
       alt="The Starry Night painting: swirling blue sky with bright stars over a village"
       width="800" height="640">
  <figcaption>
    <cite>The Starry Night</cite> by Vincent van Gogh, 1889. 
    Oil on canvas, 73.7 cm x 92.1 cm. 
    Museum of Modern Art, New York.
  </figcaption>
</figure>

<!-- Blockquote as a figure -->
<figure>
  <blockquote>
    <p>The only way to do great work is to love what you do.</p>
  </blockquote>
  <figcaption>
    -- <cite>Steve Jobs</cite>, Stanford Commencement, 2005
  </figcaption>
</figure>

Figures are ideal for content that needs attribution. The figcaption can include <cite> elements for proper attribution. Blockquotes with attribution are another common use of the figure element.

Key points

The <figcaption> must be a direct child of <figure> and should be either the first or last child -- not placed in the middle between other content.
Not every image needs a <figure>. Use it only when the image is self-contained content referenced from the text (like 'see Figure 1'). Inline images in the text flow do not need figure wrappers.
The alt attribute and figcaption serve different purposes: alt describes the image for accessibility; figcaption provides context visible to all users.

Concepts covered

figure Element, figcaption Element, Semantic Grouping, Accessible Captions, When to Use figure