HTML <figure> Tag
The <figure> tag includes images, diagrams, illustrations etc. Description of the tag, attributes and examples.
The <figure> tag marks up self-contained content — a unit that is referenced from the main flow of the document but is complete on its own. It commonly holds an image, but it can just as well wrap a diagram, illustration, code listing, quotation, or table.
The <figure> tag is one of the HTML5 elements.
What "self-contained content" means
A piece of content is "self-contained" when it could be moved elsewhere — to a sidebar, an appendix, or the next page — without changing the meaning of the surrounding text. The body might say "see the figure below", but the figure itself does not have to sit at that exact spot to make sense.
This is the key reason to choose <figure> over a bare <img>:
- Semantics, not just layout.
<figure>tells the browser and assistive technology "this is a referenced, standalone illustration," whereas a plain<img>is just an inline image in the text. - It groups the content with its caption. A
<figure>ties an image (or code, or quote) to its description so they travel together as one logical block. - Screen-reader treatment. Many screen readers announce a
<figure>as a distinct figure region and read its<figcaption>as the figure's label, so users hear the explanation tied directly to the visual.
If an image is purely decorative or flows inline as part of a sentence, a bare <img> is fine — reach for <figure> when the content is a referenced, captioned unit.
Adding a caption with <figcaption>
To label or explain the figure, nest a <figcaption> element inside <figure>. It must be the first or last child of the <figure> — first to display the caption above the content, last to display it below.
A <figure> may contain at most one <figcaption>.
Syntax
The <figure> tag comes in pairs. The content is written between the opening (<figure>) and closing (</figure>) tags.
Example: <figure> with <figcaption>
This is the most common usage — an image paired with a caption:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The Eiffel Tower at sunset (see Figure 1).</p>
<figure>
<img
src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt="The Eiffel Tower silhouetted against an orange sky"
width="250"
height="200"
/>
<figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
</figure>
</body>
</html>Example: a code listing
A <figure> is a natural wrapper for a referenced code sample. The caption can name the listing:
<figure>
<figcaption>Listing 1. A minimal HTML page.</figcaption>
<pre><code><!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>Hello, world!</body>
</html></code></pre>
</figure>See <pre> and <code> for formatting code.
Example: a quotation
A pulled quote that is referenced from the text can be a figure, with the source in the caption:
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>See <blockquote> for marking up quotations.
Example: a table
Tabular data that is referenced as a figure can be wrapped too:
<figure>
<figcaption>Table 1. Browser market share.</figcaption>
<table>
<tr><th>Browser</th><th>Share</th></tr>
<tr><td>Chrome</td><td>65%</td></tr>
<tr><td>Safari</td><td>19%</td></tr>
</table>
</figure>See <table> for building tables.
The difference between <figure> and <aside>
Both elements group related content, but they answer different questions.
<figure>holds content that is part of the main flow — the document refers to it ("as shown in Figure 1"). Removing it would leave a dangling reference. Use it for images, diagrams, code listings, and quotes that the text points to.<aside>holds content that is tangential — sidebars, related links, pull quotes, or ad units. The main text reads perfectly even if the aside is removed, because nothing in the body refers to it.
Concrete contrast: a diagram captioned "Figure 2: request lifecycle" that the article discusses is a <figure>. A boxed "Related articles" list beside the same paragraph is an <aside>.
Accessibility
<figure>has an implicit ARIAfigurerole; you do not need to addrole="figure"manually.- When present, a visible
<figcaption>acts as the figure's accessible name (label), so screen-reader users get the explanation tied to the content. Prefer a real<figcaption>overaria-labelso sighted and non-sighted users see the same text. - For images, the
<img>alttext and the<figcaption>serve different purposes:altdescribes the picture for users who cannot see it, while the caption adds context for everyone. Avoid repeating the exact same words in both.
Attributes
The <figure> tag supports the Global Attributes and the Event Attributes.