HTML5 Features - The Figure Element

2. The Figure Element

Consider the following mark-up for an image:

1. <img src="path/to/image" alt="About image" />  
2. <p>Image of Mars. </p>  

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

1. <figure>  
2.     <img src="path/to/image" alt="About image" />  
3.     <figcaption>  
4.         <p>This is an image of something interesting. </p>  
5.     </figcaption>  
6. </figure>