<figure>: The FIGURE Element
Last updated: 2026-10-13
<figure>The FIGURE Element
Represents self-contained flow content, often with a figcaption, used for images, diagrams, code or examples.
| Category | Semantic |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </figure> tag |
| Status | Standard |
📝 Syntax
<figure>figure content</figure>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <figure> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Content inside figure stays meaningful when moved; caption should be figcaption, not a plain p.
❓ FAQ
QCan figure only hold images?
ANo.
<figure> is a self-contained content unit that can be lifted out of the document without hurting the main point: images, code blocks, tables, videos, charts, poems. Usually paired with <figcaption>, it is the semantic content card.QHow does figure differ from a bare img?
AA bare
<img> is just an illustration; wrapping it in <figure> declares a self-contained referenceable unit that screen readers treat as a whole, and pairing with <figcaption> establishes the image-caption relationship. Use figure when you need captions or grouped content.QCan figure hold multiple images?
AYes.
<figure> lets several images share one <figcaption> (e.g. Figure 1a and 1b) — one of its advantages over a single <img>. Each image still needs its own alt attribute.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
