HTML figure and figcaption: Semantic Images, Captions, and Media

HTML figure and figcaption let you group self-contained content such as images, diagrams, code samples, or charts with a caption. They help your page structure stay semantic, readable, and more accessible.

Quick answer: Use figure for the self-contained item and figcaption for its caption. The caption can appear at the start or end of the figure, and there should be only one figcaption per figure.

Difficulty: Beginner

You'll understand this better if you know: basic HTML element structure, how images work in HTML, and the difference between semantic and non-semantic tags.

1. What Are figure and figcaption?

figure is a semantic HTML element for content that can stand on its own, even if you move it away from the main text. figcaption is the caption or label for that content.

figure wraps a single self-contained item or a related group of items.
figcaption provides a caption, title, explanation, or attribution.
The caption is associated with the figure as a whole, not just the image inside it.
You can use them for images, illustrations, code snippets, diagrams, charts, audio, video, and more.

A common mistake is to think figcaption is only for photos. In HTML, it can describe any self-contained content that needs a caption.

2. Why figure and figcaption Matter

These elements improve document structure by showing that a piece of content belongs together with its caption. That helps browsers, screen readers, search engines, and future maintainers understand your markup.

They are especially useful when:

an image needs a caption that is part of the content, not a decorative label
a code sample needs a title or explanation
a chart or diagram needs a description tied to the visual
you want better semantics than a plain div wrapper

Use them when the caption is meaningful content. If the text is just an accessible label for a control or image, another element such as alt text or label may be more appropriate.

3. Basic Syntax or Core Idea

The basic pattern is simple: place the main content inside figure, then add one figcaption for the caption.

Minimal structure

This example shows the most common pattern for an image and its caption.

<figure>
  <img src="mountain.jpg" alt="A mountain covered in snow">
  <figcaption>Snow on the mountain at sunrise.</figcaption>
</figure>

This says the image and caption belong together. The alt text describes the image content for people who cannot see it, while the caption adds contextual information for everyone.

Caption placement rules

The figcaption element can appear before or after the figure content. Most developers place it after the content because it reads naturally.

<figure>
  <figcaption>Example output from the build process.</figcaption>
  <pre><code>Build completed successfully.</code></pre>
</figure>

Even though the caption comes first here, it still belongs to the figure as a whole.

4. Step-by-Step Examples

Example 1: A photo with a caption

This is the classic use case. The caption explains what the image shows or gives context such as a location or date.

<figure>
  <img src="team-meeting.jpg" alt="A team gathered around a conference table">
  <figcaption>The design team reviews the final mockups before launch.</figcaption>
</figure>

The image description in alt stays concise, while the caption adds meaning and context.

Example 2: A code sample with a caption

figure is not limited to media. You can wrap code blocks when the sample benefits from a title or explanation.

<figure>
  <figcaption>Basic HTML list structure</figcaption>
  <pre><code><ul>
  <li>First item</li>
  <li>Second item</li>
</ul></code></pre>
</figure>

This makes the sample self-contained and easier to reference in tutorials or documentation.

Example 3: A chart or diagram

A chart often needs a caption because the visual alone may not explain the data source, date range, or key insight.

<figure>
  <img src="sales-chart.png" alt="Bar chart showing monthly sales growth">
  <figcaption>Monthly sales increased by 18% after the spring campaign.</figcaption>
</figure>

The caption helps readers interpret the chart instead of forcing them to infer the meaning.

Example 4: A video with supporting text

You can also use figure with embedded media when the caption provides useful context.

<figure>
  <video controls src="demo.mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Short product walkthrough showing the new checkout flow.</figcaption>
</figure>

Here the caption explains what the video is about without mixing that text into the media element itself.

5. Practical Use Cases

Blog posts that include photos, illustrations, or screenshots with captions.
Documentation pages that show code examples with descriptive labels.
Data articles that present charts, graphs, or infographics.
Portfolio sites that add location, date, or project notes to images.
Course materials that explain diagrams, demos, or embedded videos.

Think of figure as the semantic container for content that can be cited, described, or moved as a unit.

6. Common Mistakes

Mistake 1: Using figure for every image

Not every image needs a figure. Decorative images usually only need an img element with empty alt text, not a caption wrapper.

Problem: Wrapping decorative graphics in figure adds unnecessary markup and can make the page feel cluttered for assistive technology users.

<figure>
  <img src="divider.svg" alt="">
  <figcaption>Decorative divider</figcaption>
</figure>

Fix: Use a plain image when it is decorative and does not need a caption.

<img src="divider.svg" alt="">

The corrected version is simpler and avoids giving decorative content extra semantic weight.

Mistake 2: Using more than one figcaption

A figure should have one caption element. If you need more than one block of explanatory text, keep the main caption in figcaption and put extra details elsewhere inside the figure or nearby in the document.

Problem: Multiple figcaption elements make the figure’s official caption unclear and weaken the semantic relationship.

<figure>
  <img src="map.png" alt="City map with transit lines">
  <figcaption>Transit map for downtown.</figcaption>
  <figcaption>Updated in March 2026.</figcaption>
</figure>

Fix: Keep one caption and move the extra detail into separate text inside the figure or in a nearby paragraph.

<figure>
  <img src="map.png" alt="City map with transit lines">
  <figcaption>Transit map for downtown.</figcaption>
  <p>Updated in March 2026.</p>
</figure>

The corrected version preserves a single clear caption while still providing the extra context.

Mistake 3: Treating figcaption as a replacement for alt text

The caption and the alt attribute do different jobs. alt text is required for images that convey information, while figcaption adds visible context.

Problem: If the image has no useful alt text, screen readers may lose the image’s essential meaning even if a caption is present.

<figure>
  <img src="architecture-diagram.png" alt="">
  <figcaption>Architecture diagram showing the API, cache, and database layers.</figcaption>
</figure>

Fix: Give the image an informative alt value that complements the caption.

<figure>
  <img src="architecture-diagram.png" alt="Diagram of an API connected to a cache and database">
  <figcaption>Architecture diagram showing the API, cache, and database layers.</figcaption>
</figure>

The corrected version gives both sighted and non-sighted users the context they need.

7. Best Practices

Use figure only for self-contained content

Choose figure when the content could be moved elsewhere without breaking the main flow of the page. That keeps your markup meaningful.

<figure>
  <img src="wireframe.png" alt="Homepage wireframe">
  <figcaption>Initial wireframe for the homepage layout.</figcaption>
</figure>

This is better than using a generic wrapper because the browser and assistive technologies can understand the relationship.

Keep figcaption concise but useful

A caption should add context, not repeat the alt text word for word. Use it to describe source, meaning, interpretation, or attribution when relevant.

<figure>
  <img src="chart.png" alt="Line chart showing traffic growth">
  <figcaption>Traffic grew steadily after the new onboarding flow launched.</figcaption>
</figure>

This gives readers a takeaway instead of restating what they can already see.

Match the caption to the content’s purpose

If the figure is a screenshot, the caption can explain what feature is shown. If it is a photograph, the caption can identify the subject or location.

<figure>
  <img src="settings-screen.png" alt="Application settings screen">
  <figcaption>The privacy settings page with notification controls enabled.</figcaption>
</figure>

Good captions make the figure more helpful without overexplaining it.

8. Limitations and Edge Cases

figcaption must be a direct child of figure.
There should be only one figcaption per figure.
The caption can appear before or after the figure content, but it still belongs inside the same figure.
Not every image should be wrapped in figure; purely decorative content often should not.
Screen readers use the relationship between image, caption, and alt text differently, so both need to be written carefully.
Using figure does not automatically make an image accessible; the alt text still matters.

One subtle point is that figcaption is not the same as an image title tooltip. It is part of the document content, not a hover-only hint.

9. Practical Mini Project

Here is a small, complete example of an article section that shows a product screenshot with a helpful caption. This pattern is common in documentation and landing pages.

<article>
  <h2>Dashboard preview</h2>
  <p>The dashboard summarizes recent activity, revenue, and alerts in one place.</p>

  <figure>
    <img src="dashboard-preview.png" alt="Dashboard showing revenue, alerts, and recent orders">
    <figcaption>Screenshot of the dashboard after a full day of live traffic.</figcaption>
  </figure>

  <p>Use the dashboard to spot trends and respond to urgent issues quickly.</p>
</article>

This example combines a heading, supporting paragraph, semantic media grouping, and a caption that adds context without duplicating the image description.

10. Key Points

figure groups self-contained content with its caption.
figcaption provides the caption for that figure.
Use them for meaningful images, code, charts, diagrams, video, and similar content.
Keep alt text and captions separate because they serve different accessibility purposes.
A figure should usually have one clear caption.
Do not wrap decorative content in figure just because you can.

11. Practice Exercise

Create a semantic HTML snippet for a blog post that includes a photo of a coffee mug on a desk, a short caption, and meaningful alt text.

Wrap the image in figure.
Add one figcaption that explains the context of the photo.
Make the alt text describe the image itself, not the caption.

Expected output: A valid figure element containing one img and one figcaption, with both written for accessibility.

Hint: The caption can mention why the photo matters, while the alt text should mention what is visible.

<figure>
  <img src="coffee-mug.jpg" alt="A coffee mug beside a laptop on a wooden desk">
  <figcaption>A quiet workspace before the morning stand-up meeting.</figcaption>
</figure>

12. Final Summary

figure and figcaption are small elements, but they make a big difference in how clearly your HTML communicates structure and meaning. Use them when content and caption belong together as a single semantic unit.

Remember the key distinction: alt text describes the image for accessibility, while figcaption adds visible context for the whole figure. When you use both correctly, your content becomes easier to understand, easier to maintain, and more accessible to more people.

Next, try applying figure and figcaption to a screenshot, chart, or code sample in one of your own pages.