Module 7: Images and Responsive Media
Figures and Captions
Group an image or other self-contained content with a caption using figure and figcaption.
Use figure when an image, code sample, diagram, or other content is self-contained and referenced as a unit from the surrounding text. Use figcaption for its caption.
<figure>
<img src="images/network-map.png"
alt="Diagram showing a browser requesting data from an API">
<figcaption>Figure 1: A simplified browser-to-API request.</figcaption>
</figure>
A figure can be moved or placed elsewhere without changing the main flow of an article. A caption can explain the image, credit its source, or identify what the reader should notice.
The figcaption is visible text. The alt attribute is a text alternative for users who cannot see the image. They can complement each other, but they have different jobs. If the caption already provides the exact information needed, keep the alternative concise rather than repeating the caption word for word.
figure is not limited to images. It can also group a code listing, chart, quotation, or diagram when the content makes sense as a standalone unit. Do not wrap every small icon in a figure automatically.