figcaption

The HTML <figcaption> element gives a <figure> a visible caption or explanation. It can describe an image, chart, code sample, or other self-contained content.

What you will learn

What role figcaption plays in describing a figure
Where to place it and how to write the basic markup
How its role differs from image alt text

Basic syntax

<figure>
  <img src="growth-chart.png" alt="A line chart rising from left to right">
  <figcaption>Figure 1: Monthly growth from January to June.</figcaption>
</figure>

Place figcaption as a child of figure. It may appear before or after the figure content, but use one clear caption for the figure.

What belongs in a caption?

A caption can identify the figure, explain its context, credit a source, or point out a conclusion that the surrounding text needs. Keep it concise enough to scan, while including context that is important for understanding the figure.

<figure>
  <pre>...code sample...</pre>
  <figcaption>Example: read a value from a form control.</figcaption>
</figure>

figcaption and alt are complementary

alt: Provides an alternative for an image when it cannot be seen or loaded. It should identify the image’s essential content or purpose.
figcaption: Labels or explains the figure as a whole and is visible content for everyone.

Do not repeat the same sentence unnecessarily. Let alt cover the essential alternative and let the caption add context, interpretation, or credit.

Common mistakes