Michael Gearon

figure and figcaption tags in HTML

Michael Gearon

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 it’s 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.

<figcaption> element

This option element can be placed before or after the content inside the <figure> 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

Michael Gearon

Written by

Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. 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.