The <figure> represents self-contained content, frequently with a caption (<figcaption>), and is typically 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.
Permitted ARIA roles group, presentation
DOM interface HTMLElement


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



<!-- Just an image -->
  alt="A robotic monster over the letters MDN.">

<!-- Image with a caption -->
  alt="A robotic monster over the letters MDN.">	
  <figcaption>MDN Logo</figcaption>

Code snippets

  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
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;


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


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


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 8 Yes 4 9 11 5.1
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes 4 11 5.1 Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.