Michael Gearon

figure and figcaption tags in HTML

Michael Gearon

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.


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

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects