<figure>

Introduced in HTML5

Summary

The HTML <figure> Element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.

Usage notes:

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

Attributes

This element only includes the global attributes.

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>Caption for the awesome picture</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>
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"<br /></p>
    </figure>


Edsger Dijkstra :-

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

Specifications

Specification Status Comment
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation  

Browser compatibility

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

See also

Document Tags and Contributors

Last updated by: kscarfone,