index.md

---

title: '<figure>: The Figure with Optional Caption element'
slug: Web/HTML/Element/figure
page-type: html-element
browser-compat: html.elements.figure

---

{{HTMLSidebar}}

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

{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}

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.

• A caption can be associated with the <figure> element by inserting a {{HTMLElement("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="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>

{{EmbedLiveSample("Images", "100%", 375)}}

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>

{{EmbedLiveSample("Code_snippets", "100%", 250)}}

Quotations

<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>

{{EmbedLiveSample("Quotations")}}

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 dishevelled 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>

{{EmbedLiveSample("Poems", "100%", 250)}}

Technical summary

Content categories	Flow content, palpable content.
Permitted content	A {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
Tag omission	{{no_tag_omission}}
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	{{domxref("HTMLElement")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• The {{HTMLElement("figcaption")}} element.