<figure>, <figcaption>

Syntax

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Figure 1: Quarterly sales</figcaption>
</figure>

Examples

<figure>
  <img src="https://via.placeholder.com/500x300" alt="Mountain landscape at sunset">
  <figcaption>A sunset over the mountains, taken in 2025.</figcaption>
</figure>

<figure>
  <pre><code>const sum = (a, b) => a + b;</code></pre>
  <figcaption>Example: an arrow function that adds two numbers</figcaption>
</figure>

<figure>
  <img src="before.png" alt="Before redesign">
  <img src="after.png" alt="After redesign">
  <figcaption>Before and after the homepage redesign</figcaption>
</figure>

Best practices

• Use figure when content (and its caption) should make sense even if moved elsewhere on the page
• figcaption can appear as either the first or last child of figure — both are valid
• Not every image needs a figure — use it when a caption or independent referencing genuinely adds value
• The alt attribute on img still matters even inside a figure; figcaption is a caption, not alt text

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard