figure and figcaption tags in HTML
Last updated on
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.
Figure element
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.
Syntax
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.
Browser support
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
More guides
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects