HTML5 Figure and Figcaption Tags, TutorialsPoint

HTML5 Figure Tag

The HTML <figure> tag is used for annotating illustrations, diagrams, photos, code listings, etc.

You can use the <figure> element in conjunction with the <figcaption> element to provide a caption for the contents of your <figure> element.

Example :

<!DOCTYPE html>
 <html>
     
    <head>
         <title>Figure Tag</title>
    </head>
     
    <body>
         
        <figure>
          <img src="figure-tag.jpg" alt="sample image" width="300" height="200">
          <p>This is figure tag is not supported in Internet Explorer 8 and earlier versions.</p>
        </figure>
         
    </body>
     
</html>

Output :

HTML5 Figcaption Tag

The HTML5 <figcaption> tag is used to provide a caption when using the <figure> tag.

FIGCAPTION Element is used to put an additional information about the image. As if we have to give a discription about the image, we don't need to embed an another paragraph to define the description.

Example :

<!DOCTYPE html>
 <html>
     
    <head>
         <title>Figure Tag</title>
    </head>
     
    <body>
         
        <figure>
          <img src="figure-tag.jpg" alt="sample image" width="300" height="200">
          <figcaption>Figcaption :- Sample Image</figcaption>
        </figure>
         
    </body>
     
</html>

Output :

HTML5 Tutorial