<figure>

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.

• Content categories Flow content, sectioning root, palpable content.
• Permitted contentA <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 parent elements Any element that accepts Flow content.
• DOM interface HTMLElement

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>

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>

          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>

Specifications

Browser compatibility

See also

• The <figcaption> element.