Figure and Figcaption in HTML5

In this article I am going to describe Figure and Figcaption tags of HTML5. Both of these tags are new.

Figure Tag

The Figure tag is used to show flow content. The flow content is the elements that are used in the body tag.

Figcaption Tag

The Figcaption tag represents caption of elements. Figcaption is optional and it can appear before or after the Figure Tag.


The syntax of the Figure and Figcaption tags in HTML5 are:

       <figure> flow controls</figure>
       <figcaption> caption</figcaption> 

So, let's begin it now.

Step 1

The complete code of figure.html is:

  1. <DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Figure and Figcaption tags</title>  
  5. </head>  
  6. <body>  
  7. <div>  
  8. <h1 >Implementation Of Figure and Figcaption tag in html5</h1>  
  9. <figure>  
  10. <img src="/C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Picture" width="300" height="400"/>  
  11. <figcaption>This picture represent a Desert image</figcaption>  
  12. </figure>  
  13. </div>  
  14. </body>  
  15. </html>  


Step 2

Output of Figure and Figcaption tag is as below:



Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now