The HTML figure tag explained

The HTML5 <figure> tag is a general purpose tag commonly used to group together an embedded media in your HTML document.

Why use the figure tag?

The purpose of the tag is to provide a semantic built-in tag to group together a media and its caption.

Before the release of HTML5, a <div> tag is commonly used to group a media and its caption.

The following example shows a photo and its caption being grouped using the <div> tag:

<div class="figure">
  <img src="photo.jpg" alt="The light blue color">
  <p class="caption">The light blue color</p>
<div>

With the release of the <figure> tag in HTML5, you can replace the <div> tag above as follows:

<figure>
  <img src="photo.jpg" alt="The light blue color">
  <figcaption>The light blue color</figcaption>
<figure>

The <figcaption> tag is a companion to the <figure> tag with the purpose of displaying the caption or the legend of the figure.

You can place the <figcaption> tag at the top or the bottom of the <figure> tag.

All embeddable media such as photos, videos, and sound recordings can be used together with the <figure> tag.

Although the <img> tag is the most common tag used together with the <figure> tag, you can use the <video> and <audio> tags with it as well:

Here’s an example of using the <figure> tag with a video element:

<figure>
  <video controls>
    <source src="video.webm" type="video/webm" />
  </video>
  <figcaption>An example caption for video element</figcaption>
<figure>

By default, the <figure> tag will render the elements inside it aligned to the left.

If you want to align the figure to the center, you need to add the text-align:center style to the tag:

<figure style="text-align:center;">
  <img src="photo.jpg" alt="The light blue color">
  <figcaption>The light blue color</figcaption>
<figure>

The code above will render the figure elements at the center of the container.

When to use the figure tag?

The <figure> tag is only used to group together an embedded media and its caption. When you have an <img> or a <video> element that goes with a caption, you should use the <figure> tag.

By default, media tags like <img>, <audio> and <video> tags are inline elements.

The <figure> tag is a block element, so placing the media tags inside the <figure> tag will ensure your media to take the whole horizontal block.

And that’s how the <figure> tag works 😉