mozilla
Your Search Results

    <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>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>
    
    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
    The definition of '<figure>' in that specification.
    Living Standard  
    HTML5
    The definition of '<figure>' in that specification.
    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: mooyoul,