figure and figcaption
Wrap images in semantic figure containers with captions.
What Is figure?
The <figure> element marks up self-contained content that is referenced from the main text:
- Images with captions
- Code listings
- Diagrams, charts, and illustrations
- Quotations
The key characteristic: if removed from the main flow, the surrounding text would still make sense.
figure with figcaption
<figcaption> provides a caption for the figure:
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->