The HTML figure tag explained

Posted on Aug 05, 2021

Learn how the HTML figure tag works and why you need to use it

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 😉

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.