figure and figcaption
The figure tag bundles media with its caption, and figcaption holds the caption text. Together they say: this image, chart, code sample, or quote is one unit with this label. The caption stays glued to the media even if the page layout moves around it.
The pairing exists because an image with a paragraph underneath is two unrelated things. The text can drift away, and nothing connects them for a screen reader or a search engine. Figure and figcaption make the connection official. Once the pair is marked up, browsers and reading tools can treat the two as a single piece of content.
The figcaption must be a direct child of figure, and it can sit above or below the media. The pattern works in every browser and suits any content that could be pulled out of the page and still make sense on its own.
What counts as a figure
Figures are not just images. A chart, a code sample, a quote, a table snippet, or a diagram all qualify. A useful test: if the content could move to an appendix without breaking the page flow, it is a good candidate for figure.
<figure>
<blockquote>Code is read more than it is written.</blockquote>
<figcaption>Attributed to a seasoned developer.</figcaption>
</figure>One caption, many items
A figure can hold more than one image under a single caption, which is common in photo galleries and comparison shots. The figcaption stays before or after the whole group. Style figure as a unit with CSS, and it behaves like a neat card.
Syntax
<figure>
<img src="chart.png" alt="Monthly sales chart">
<figcaption>Sales for the last quarter.</figcaption>
</figure>Same Text in alt and figcaption Makes Screen Readers Stutter Twice
Thrilled beginners copy image description into both alt and figcaption - screen reader then reads 'Trulli house. Fig.1 Trulli house' twice. Best practice from blind user QuentinC's answer (59↑ on Stack Overflow #58447538): figcaption is visible editorial caption for all, alt is functional description; if figcaption already describes, use alt="" or complementary text, never duplicate. Google also treats figcaption as caption, not as alt for Image SEO.
<figure><img src="llama.jpg" alt="Closeup of llama face on mountain"><figcaption>Martha roams Machu Picchu - Oct 2018</figcaption></figure>Good to know
- Figcaption must be inside figure.
- The caption travels with the media.
- Use it for images, code, quotes, and charts.
- One figure can hold several images with a single caption.