Web/HTML/Element/figure

The HTML <figure> (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.

Content categories	Flow content, sectioning root, palpable content.
Permitted content	A `<figcaption>` element, followed by flow content; or flow content followed by a `<figcaption>` element; or flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts Flow content.
Implicit ARIA role	figure
Permitted ARIA roles	With no figcaption descendant: any, otherwise no permitted roles
DOM interface	`HTMLElement`

Attributes

This element only includes the global attributes.

Usage notes

Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure's caption.

Examples

Images

<!-- Just an image -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
</figure>

<!-- Image with a caption -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
  <figcaption>MDN Logo</figcaption>
</figure>

Code snippets

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

Quotations

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

Poems

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<figure>' in that specification.	Living Standard
HTML 5.2The definition of '<figure>' in that specification.	Recommendation	No changes from HTML 5.0.
HTML5The definition of '<figure>' in that specification.	Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`figure`	Chrome Full support 8	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support 11	Safari Full support 5.1	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 5.1	Samsung Internet Android Full support Yes

Legend

Full support: Full support