When and how to use the figure element in HTML5

The new HTML5 element figure is meant to serve developers allowing them to associate images, videos and other elements with the page’s main content excluding the actual figure element content from the main content. This means images should not be inserted into a figure element. A banner image for example has no direct main content link and therefore doesn’t require a figure element (for this particular situation an aside element is more appropriate).

The figure element and the figcaption element are often used with one another. The latter element is used to inlcude subtitles. 

<figure>
<img src="image.jpg" alt="Cow and Chicken">
<figcaption>On this picture, you see a cow and a chicken</figcaption>
</figure>


Was this useful?