<figure>

The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

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>

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>

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>

<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

Browser compatibility

See also

• The <figcaption> element.