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

Source: https://devdocs10.com/articles/html/html-figure  
By Murat Bo · Published 2026-09-29 · DevDocs10 (https://devdocs10.com)

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

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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.