Figure and Figcaption in HTML5


In this article, I am going to describe Figure and Figcaption tags ofHTML5. 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 the 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
The output of Figure and Figcaption tag is as below: