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></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
<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>
<pre class="language-html"><code class="language-html">

Alternatively for it to be below it could look like this:

<figure><img src="media1.png" alt="" /><figcaption>Caption of the media</figcaption> </figure>
<pre class="language-html"><code class="language-html">

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

Mike

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.