<figure> HTML figure with optional caption elementThe <figure> HTML 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.
<figure>
<img
src="/shared-assets/images/examples/elephant.jpg"
alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>figure {
border: thin silver solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222222;
color: white;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}This element only includes the global attributes.
<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.<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.<figcaption> provides the accessible name for the parent <figure>.<!-- Just an image -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>
<!-- Image with a caption -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
<figcaption>MDN Logo</figcaption>
</figure><figure>
<figcaption>Get browser details using <code>navigator</code>.</figcaption>
<pre>
function NavigatorExample() {
let txt = `Browser CodeName: ${navigator.appCodeName};\n`;
txt += `Browser Name: ${navigator.appName};\n`;
txt += `Browser Version: ${navigator.appVersion};\n`;
txt += `Cookies Enabled: ${navigator.cookieEnabled};\n`;
txt += `Platform: ${navigator.platform};\n`;
txt += `User-agent header: ${navigator.userAgent};`;
console.log("NavigatorExample", txt);
}
</pre>
</figure><figure>
<figcaption><b>Edsger Dijkstra:</b></figcaption>
<blockquote>
If debugging is the process of removing software bugs, then programming must
be the process of putting them in.
</blockquote>
</figure><figure>
<p>
Bid me discourse, I will enchant thine ear,<br />
Or like a fairy trip upon the green,<br />
Or, like a nymph, with long dishevelled hair,<br />
Dance on the sands, and yet no footing seen:<br />
Love is a spirit all compact of fire,<br />
Not gross to sink, but light, and will aspire.<br />
</p>
<figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>| Content categories | Flow content, 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 |
<figcaption> element.