Media & Embedded Content

<figure> & <figcaption>

Pair an image, diagram, or code block with a caption.

1Self-Contained Content

<figure> groups standalone media with its caption. The caption is in <figcaption> and can be the first or last child.

Example Code

css

<figure>
  <img src="chart.png" alt="Q4 sales chart" />
  <figcaption>Figure 1. Quarterly sales for 2026.</figcaption>
</figure>

2Put the element in context

A figure groups content with a caption that describes it, such as a diagram or project photograph. Not every image requires a figure, and a caption is not a substitute for an image alternative. Choose each based on what the reader needs to understand.

3Practice with a small page

Put a project photograph and a short contextual caption inside figure. Write an image alternative that complements rather than mechanically repeats the caption. Move the whole figure within the article and check that its meaning remains coherent.

Finished reading?

Mark this topic as complete to track progress.

Next Topic

<video> Tag