<figure> - HTML CSS HTML Tag

Introduction

figure element marks a unit of content optionally with a caption.

The figure Element summary

Item	Value
Element	figure
Local Attributes	None
Contents	Flow content and, optionally, one figcaption element
Tag Style	Start and end tag
New in HTML5	Yes
Changes in HTML5	N/A

Style Convention

figure {
   display: block;
   margin-before: 1em;
   margin-after: 1em;
   margin-start: 40px;
   margin-end: 40px;
}

Using the figure and figcaption Elements

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <figure> 
         <figcaption>
            Listing of code
         </figcaption> 
         <pre>
            <!--from  w  w  w. j  a  v a  2  s. com-->
            <code>
               
                var items = ["A", "B", "C", "D"];
               <br>
               
                document.writeln("I like " + items.length + " items");
            
            </code>
            
         </pre> 
      </figure>  
   </body>
</html>

<figure> - HTML CSS HTML Tag

Introduction

Demo Code

Related Tutorials