<figure> + <figcaption>: not just for images

<figure> is "this content + its caption, as a unit"

<figure>
  <img src="/chart.png" alt="Bar chart of revenue by quarter" />
  <figcaption>Revenue grew 40% in Q3 after the FastAPI migration.</figcaption>
</figure>

The element semantically binds the image and its caption. Screen readers announce them together. Reader mode keeps them paired. Easy to style as a unit.

Not just for images

<figure>
  <pre><code>print("Hello")</code></pre>
  <figcaption>Listing 1: the canonical Python example.</figcaption>
</figure>

<figure>
  <blockquote>"Talk is cheap. Show me the code." — Linus Torvalds</blockquote>
  <figcaption>From a 2000 LKML post.</figcaption>
</figure>

Code snippets, quotes, tables, diagrams — anything with a caption fits.

The caption is OPTIONAL

<figure> can exist without <figcaption>. Useful when you want the semantic "this is self-contained content" grouping but don't need a caption.

alt + figcaption — not redundant

Common confusion: image alt text and figcaption say the same thing? They don't.

• alt describes what the image shows (for users who can't see it). Always present.
• figcaption is the caption (visible to everyone, paired semantically). Optional.

For a chart: alt="Bar chart of revenue by quarter" (the WHAT) + figcaption="Revenue grew 40% in Q3" (the SO WHAT).