The figure tag is a way to group together content. It sometimes can go alongside the figcaption tag which is a way to describe the image, code snippet, diagram or an illustration. It was introduced in HTML5 and is supported in all major browsers. The benefit of the
figure tag is that it adds more meaning (semantics) to the HTML document when compared to the image tag.
The figure container is just a way to wrap together your image with its caption. If you think of a book you sometimes see an image and along the bottom a caption to explain something to do with the image.
Within a figure element, you can have multiple media elements like images or code snippets as long as they are related.
This option element can be placed before or after the content inside the element. There can only be one figcaption within the figure element.
If you wanted to add the figure element with the figcaption above your media your code snippet would be something like this:
<figure><figcaption>Caption of the media</figcaption><img src="media1.png" alt="" /></figure>
Alternatively for it to be below it could look like this:
<figure><img src="media1.png" alt="" /><figcaption>Caption of the media</figcaption> </figure>
The figcaption and figure requires a start and end tag. There are no attributes for the figure tag.
At time of writing browser support is good for both figure and figcaption. It is supported in versions and above:
- Internet Explorer 9+
- Edge 12+
- Firefox 4+
- Chrome 8+
- Safari 5.1
Michael Gearon is a Senior Interaction Designer at Government Digital Service (GDS) in Cardiff. Michael Gearon is one of the authors of The Tiny CSS Projects book, published by Manning Publications. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.