The <figure> & <figcaption> elements
The <figure> tag wraps self-contained content, such as an image, chart, code listing or quotation, that the main text refers to. Its optional <figcaption> child provides the caption and must be the first or last element inside the figure. The figure could be moved elsewhere without breaking the flow of the document.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content (<figure>) |
| Content model | Flow content, with at most one <figcaption> as the first or last child |
| Tag omission | Neither the start nor the end tag can be omitted, for either element |
| Permitted parents | <figure>: any element that accepts flow content. <figcaption>: a <figure> only |
| DOM interface | HTMLElement (both) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | Both elements accept only the global attributes. |
Common examples
An image with a caption and credit
The caption explains the image; a credit line can go in the same figcaption.
A captioned code listing
Figures aren’t just for images — numbered code samples in tutorials are a classic use.
Several images, one caption
A figure can group a small gallery under a single caption.
A chart with a summary
For charts and diagrams, use the caption to state the key takeaway, and keep the alt text for describing the image itself.
<figure> vs <picture>
They solve different problems and often work together. <picture> is about which image file the browser should load — different crops for phones, or WebP and AVIF versions with a JPEG fallback. <figure> is about meaning: it groups a self-contained piece of content with its caption.
To show a responsive image with a caption, put the <picture> inside the <figure> and add a <figcaption> after it.
| <figure> | <picture> | |
|---|---|---|
| Purpose | Group content with a caption | Choose the best image file |
| Can hold | Images, code, quotes, charts | Sources plus one <img> |
| Caption | Yes (<figcaption>) | No |
Common mistakes to avoid
- Wrapping every image in a figure. Decorative images and small inline icons don’t need one; use figure for content that the text refers to.
- A caption that repeats the alt text. Alt describes the image for people who can’t see it; the caption adds context for everyone. Say different things.
- Putting figcaption in the middle. It must be the first or last child of the figure.
- Two captions in one figure. Only one figcaption is allowed; combine the text or split into two figures.
Accessibility & SEO tips
- Captions are among the most-read text on a page, so use them to state the point of the image or chart.
- Search engines use captions as context for images, which can help them appear in Google Images for relevant searches.
- Keep alt text on every meaningful image even when it has a caption.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.
Tutorial: How to add an image