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.
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://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 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
BCD tables only load in the browser
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.
See also
- The
<figcaption>
element.