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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="The beautiful MDN logo."> </figure> <!-- Image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.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 Standard The definition of '<figure>' in that specification. |
Living Standard | |
HTML 5.2 The definition of '<figure>' in that specification. |
Recommendation | No changes from HTML 5.0. |
HTML5 The definition of '<figure>' in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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
See also
- The
<figcaption>
element.