MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

The HTML <figure> element 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

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

Examples

Example 1

<!-- Just a figure -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
MDN Logo
MDN Logo
Fig1. MDN Logo

Example 2

<figure>
  <figcaption>Get browser details
using navigator</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;
}            
  </pre>
</figure>
Get browser details using navigator
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;
}

Example 3

<figure>
  <figcaption><cite
      >Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs,
  <br />
  then programming must be the process of putting them in"</p>
</figure>
Edsger Dijkstra :-

"If debugging is the process of removing software bugs,
then programming must be the process of putting them in"

Example 4

<figure> element could be used to markup a poem.

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard  
HTML5
The definition of '<figure>' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 (Yes) 4.0 (2.0) 9.0 11.10 5.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 (Yes) 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

See also

Document Tags and Contributors

 Last updated by: ArtursDen,