Figures (<figure>, <figcaption>)

<figure> groups a piece of self-contained content — commonly an image, but also a code snippet, a chart, an audio clip, or a quotation — together with an optional caption provided by <figcaption>. "Self-contained" means the content could be moved to an appendix or a different part of the page without breaking the surrounding text's meaning.

Basic Structure

basic-figure.html

HTML

<figure>
  <img src="/mount-fuji.jpg" alt="Mount Fuji at sunrise, viewed from Lake Kawaguchiko">
  <figcaption>Mount Fuji at sunrise, seen from Lake Kawaguchiko.</figcaption>
</figure>

<figcaption> can appear as the first or last child of <figure> — both are valid — but it can only appear once per figure.

Why Use <figure> Instead of a Plain <div>

A <div> wrapping an image and a caption paragraph looks the same visually, but it carries no semantic relationship between the two. <figure> and <figcaption> explicitly tell browsers, assistive technology, and search engines that this caption describes that specific piece of content — not just a paragraph that happens to sit nearby.

Markup	Semantic relationship
`<div><img><p>caption</p></div>`	None — just an image next to a paragraph
`<figure><img><figcaption>caption</figcaption></figure>`	Explicit: this text captions this content

Screen readers can announce the caption as a caption

Some assistive technologies use the figure/figcaption relationship to announce the caption text in context with the figure, rather than reading it as an unrelated paragraph. That context is lost with a generic <div>.

Beyond Images

<figure> isn't limited to photos. Anything that's referenced from the main text but could stand alone — a code sample, a data table, a quotation, an embedded video, or a chart — is a valid candidate.

figure-with-code.html

HTML

<p>The snippet below demonstrates a basic Fibonacci generator:</p>

<figure>
  <pre><code>function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}</code></pre>
  <figcaption>A naive recursive Fibonacci implementation in JavaScript.</figcaption>
</figure>

figure-with-quote.html

HTML

<figure>
  <blockquote cite="https://www.w3.org/TR/html5/">
    <p>The figure element represents self-contained content, potentially
    with an optional caption.</p>
  </blockquote>
  <figcaption>— HTML5 Specification, W3C</figcaption>
</figure>

figure-with-chart.html

HTML

<figure>
  <img src="/quarterly-revenue.svg" alt="Bar chart of quarterly revenue, rising from $2M in Q1 to $4.5M in Q4">
  <figcaption>Quarterly revenue growth, fiscal year 2025.</figcaption>
</figure>

Multiple Items in One Figure

A single <figure> can group several related images (or other elements) under one shared caption — for example, a before/after comparison.

multi-item-figure.html

HTML

<figure>
  <img src="/before.jpg" alt="Kitchen before renovation">
  <img src="/after.jpg" alt="Kitchen after renovation">
  <figcaption>The kitchen before and after the 2025 renovation.</figcaption>
</figure>

The Semantic Grouping Benefit

<figure> marks content as self-contained, so it can be moved (e.g. to a sidebar or appendix) without breaking the flow of surrounding prose.
<figcaption> explicitly ties descriptive text to its figure, rather than leaving that relationship implicit in visual proximity.
A <figcaption> is not a substitute for alt text on an <img> — they serve different audiences and purposes (see the next section).
<figure> works for images, code, quotes, charts, audio, video, or any self-contained unit referenced from the main text.

figcaption vs alt — different jobs

alt describes the image itself for someone who can't see it at all. figcaption is visible caption text everyone sees, describing context, credit, or extra detail. Good practice is often to use both, with different wording for each.

figcaption Position: First or Last Child

The HTML spec explicitly allows <figcaption> to appear as either the first or the last child of <figure> — both are valid and browsers render the caption exactly where you place it in the markup.

figcaption-position.html

HTML

<!-- Caption above the image -->
<figure>
  <figcaption>Figure 3: Annual rainfall by region.</figcaption>
  <img src="/rainfall-chart.svg" alt="Bar chart of annual rainfall across five regions">
</figure>

<!-- Caption below the image (more common convention) -->
<figure>
  <img src="/rainfall-chart.svg" alt="Bar chart of annual rainfall across five regions">
  <figcaption>Figure 3: Annual rainfall by region.</figcaption>
</figure>

Only one figcaption per figure

A <figure> may contain at most one <figcaption>. If you need multiple captioned items, either use separate <figure> elements or write one shared caption describing the group, as shown earlier with the before/after example.

Styling a Figure and Its Caption

Browsers apply minimal default styling to <figure> (typically a small margin) and none to <figcaption> beyond normal text flow, so you have full control over layout.

figure-styles.css

CSS

figure {
  margin: 0;
  text-align: center;
}

figure img {
  max-width: 100%;
  border-radius: 4px;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
}

Figure With a Linked/Zoomable Image

A figure's image is often wrapped in a link to a larger version or a lightbox — this doesn't change the semantics, since <a> is inline-level phrasing content that fits within <figure> just like the bare image would.

figure-with-link.html

HTML

<figure>
  <a href="/photos/fuji-full.jpg">
    <img src="/photos/fuji-thumb.jpg" alt="Mount Fuji at sunrise, viewed from Lake Kawaguchiko">
  </a>
  <figcaption>Click to view full resolution.</figcaption>
</figure>

When a Plain <div> Is Still Fine

Not every image needs a <figure>. If an image is inline with a paragraph and doesn't have a caption or need to be referenced independently — like a small icon next to a sentence — a plain <img> is sufficient. Reach for <figure> specifically when there's a caption to attach or the content is meant to stand alone.

Situation	Recommended markup
Icon inline with text, no caption needed	Plain `<img>`
Photo with a caption or credit line	`<figure>` + `<figcaption>`
Code sample referenced from the main text	`<figure>` wrapping `<pre><code>`
Standalone chart or diagram with a label	`<figure>` + `<figcaption>`