The <figure> element wraps self-contained content — usually an image — that could be moved elsewhere in the document without breaking its meaning, typically paired with a <figcaption>.
Syntax
<figure>
<img src="..." alt="...">
<figcaption>Caption text</figcaption>
</figure>Basic Example
<figure>
<img src="/assets/images/architecture-diagram.png" alt="MERN stack architecture diagram showing client, server, and database layers">
<figcaption>Figure 1: A typical MERN stack architecture</figcaption>
</figure>Browser output: the image appears with its caption directly beneath it, and most browsers apply a small default margin around the whole group — visually similar to a captioned image in a printed textbook.
How It Works
<figure> is a semantic grouping element — it tells the browser and assistive technology "this image and its caption belong together as one unit," even if CSS later moves them around the page independently of the surrounding text flow.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply to <figure> itself |
Real-World Example
<article>
<p>Here's how the request flows through a typical full-stack application:</p>
<figure>
<img src="/assets/images/request-flow.png" alt="Diagram of a client request flowing through the server to the database and back">
<figcaption>A client request travels through the API layer before reaching the database.</figcaption>
</figure>
<p>Notice that the client never talks to the database directly...</p>
</article>A diagram referenced from the surrounding article text, but genuinely self-contained enough to be pulled out and reused elsewhere — exactly what <figure> is meant for.
Common Mistakes
- Using
<figure>for every single image on a page regardless of whether it has a caption or is genuinely self-contained — a plain<img>is fine when there's no caption - Putting essential body content inside a
<figure>that the surrounding paragraphs actually depend on — it should be safely removable
Best Practices
- Reserve
<figure>for images (or diagrams, code listings, quotes) with a real caption or that stand alone as a unit - Always pair it with
<figcaption>when there's a caption to show — see figcaption
Accessibility Considerations
Screen readers can announce <figure> as a distinct region with its caption properly associated, giving users clear context that a specific piece of content and its explanation belong together.
SEO Considerations
The caption text inside <figcaption> gives search engines extra readable context about the image beyond just its alt text, in the surrounding page content.
Browser & Modern HTML Notes
An HTML5 addition — no older equivalent existed; before this, developers commonly hacked together a <div> wrapper with a styled <p> for the same visual effect, with none of the semantic meaning.
Mini Practice
- Wrap an image and a one-sentence caption in a
<figure>/<figcaption>pair. - Decide whether a plain product photo with no caption needs
<figure>, and explain your reasoning.
