0%

<figure> Figure

A self-contained image, chart, code listing or quote, optionally captioned.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<figure> wraps content that the main text refers to but that could live somewhere else, such as an image, diagram, chart, code listing or quote. A <figcaption> as its first or last child gives it a caption.

A caption and an image's alt text do different jobs. Alt describes the picture; the caption adds context. Plenty of images need no figure at all. Use one when a caption makes sense.

Images, code listings, quotes and diagrams are all covered by the figure element in the WHATWG standard (opens in a new tab). Practise it in the Figures and Captions lesson.

Syntax

<figure>
  <img src="chart.png" alt="Description">
  <figcaption>Caption</figcaption>
</figure>

When to use it

A <figure> is content the text points to (see Figure 2) that could move to a sidebar, an appendix or the next page and the text would still read fine. Typical cases are a chart in a report, a code listing in a tutorial, a screenshot in documentation, a quote with its source, or a few related photos under one caption.

Logos, icons, avatars and ordinary inline photos don't need one. When nothing has a caption, a plain img is enough. A quote that is part of your argument works better as a blockquote on its own. Data tables have their own caption element.

Out of the box, browsers give figure a 40 pixel margin on the left and right and some space above and below. In a narrow layout that shrinks the images and leaves them oddly indented next to the text. Reset it with margin:0 or set your own spacing.

Live example

Edit the code and watch the preview.

<figure>
  <img src="dog.svg" alt="A dog holding a ball" width="400" height="300">
  <figcaption>Rex at the park, May 2026.</figcaption>
</figure>

More examples

Code listing with a caption

Figures hold code as happily as images. The caption numbers the listing, and the text can call it Listing 1 wherever the layout ends up putting it.

<p>The smallest valid paragraph is shown in Listing 1.</p>
<figure>
  <pre><code>&lt;p&gt;Hello, world!&lt;/p&gt;</code></pre>
  <figcaption>Listing 1: A single paragraph element.</figcaption>
</figure>

Two photos, one caption

Two related images share a single figcaption. The CSS removes the default figure margin and puts the images side by side as inline blocks. The gallery now lines up with the text around it.

<style>
.pets{margin:0}
.pets img{display:inline-block;vertical-align:top;margin-right:8px}
</style>
<figure class="pets">
  <img src="cat.svg" alt="Milo the cat" width="200" height="150">
  <img src="dog.svg" alt="Rex the dog" width="200" height="150">
  <figcaption>Our two rescue pets, adopted in 2025.</figcaption>
</figure>

Tip: A captioned image still needs its own alt text.

Browser support

figure arrived with HTML5, and every current browser supports it and maps it to the ARIA figure role. Internet Explorer 8 and other very old browsers saw it as an unknown element. No real visitor uses those any more.

Accessibility

The figcaption gives the figure its accessible name. The image inside still needs alt text that describes what it shows. How alt text and captions work together is explained in the W3C images tutorial (opens in a new tab).

Common mistakes

Wrong

<figure>
  <img src="chart.png" alt="Chart">
  <p>Sales by month</p>
</figure>

Right

<figure>
  <img src="chart.png" alt="Sales rose from 20 to 45 units between January and June">
  <figcaption>Sales by month, 2026</figcaption>
</figure>

A figcaption ties the caption to the figure in code. The image still needs alt text that means something.

Frequently asked questions

Do I need figure for every image?

No. <figure> is for an image, chart, code sample or quote that stands as its own unit, is referred to from the main text, often has a caption, and could move to an appendix without breaking the flow. Icons, logos and decorative pictures sitting inline can do without it.

Is figcaption a replacement for alt text?

No. The alt attribute stands in for the image when someone cannot see it. The <figcaption> is visible to everybody and adds context: a title, a credit, an explanation. Do not put identical text in both, or screen reader users hear it twice.

Practise it

Related media elements

<img>Displays an image; src and alt required.<picture>Holds several image sources and lets the browser choose one.<source>One alternative file inside picture, audio or video.<track>Adds WebVTT captions, subtitles or chapters to audio and video.<figcaption>A figure's caption, placed as its first or last child.<audio>Plays sound, like music or a podcast episode.<video>Adds a video player.<iframe>Shows another web page inside a frame on yours.<embed>Inserts external content, like a PDF, that the browser or a plugin displays.<object>Embeds an external resource and holds fallback content for it.<canvas>A bitmap surface that JavaScript draws graphics on.<svg>Vector graphics drawn right in the HTML, sharp at any size.<math>Math notation written as MathML markup.<map>Holds the clickable areas that turn an image into an image map.