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 😉
