Why use the figure element?

HTML-CSS
3

Good question.

It all goes down to a few things - semantic meaning, SEO, accessibility (and maybe more…)

What is it?

The <figure> element is a semantic tag that just came out in HTML5. This tells the browser that <figure> is a container that holds elements that have a relation to each other. The <figcaption> plays a role to this and it will be explained below.

Also, note that it does not have to contain just <img> element, it can contain other elements such as tables, video clip, audio clips, etc

Why should we use it?

Before HTML5, there was no element for captions for images, diagram, video and so on. Take this as a case example. We have two images of a cat doing a mugshot (I will let you decide on what he or she had been arrested for lol).

  • The first image is the front angle portrait shot.
  • The second image is the sideway angle shot.

Before HTML5

<div>
    <img src=“cat-facing.jpg” alt=“Mugshot 1: front angle shot”>
    <img src=“cat-sideway.jpg” alt=“Mugshot 2: sideway angle shot”>
    <p>This is two images of the cat’s mugshot with front angle and sideway angle</p> 
</div>

What is happening here is two images are wrapped up in a <div> container. Both have the alternative text, which is designed for screen readers and also as a backup in case the image failed to load, thus show the alternative text. Underneath the images, you have the “caption” in the <p> tag.

What is the problem is that despite they are all wrapped in the same container, they technically (semantically-wise) do not relate to each other, Look at it in two scenarios:

  1. The images are down and failed to show, you will have two alternative-text along with the “caption"

  2. A vision-impaired user will have the screen reader indicating the two alternative text, followed by the “caption”, which can be confusing and to solve this is to put in the caption:

<p>This is a caption to say that this is two images of the cat’s mugshot with front angle and sideway angle</p>

But then that would be kind of odd for non-vision-impaired users. This is where <figure> comes in handy. Here is the new way to do it and then I will explain it:

HTML5

<figure>
    <img src=“cat-facing.jpg” alt=“ ”>
    <img src=“cat-sideway.jpg” alt=“ ”>
    <figcaption>This is two images of the cat’s mugshot with front angle and sideway angle</figcaption>
</figure>

The structure kind of works the same, with two images, they are wrapped up in a container along with a caption. Only this time it is telling the browser that there are two images and a caption that has a relation to each other.

This matters because:

SEO
The <figcaption> will help the search engine to find these images. If you google “cat mugshot front and sideway angle”, the bots will go through millions of descriptive text that matched nearest to your query.

Accessibility
Notice we have left the alternative text blank? This is optional to leave it blank or still add the text. Because the figcaption has relation to these images, the screen reader will inform the user that this is a caption content, so if it is placed right after or before the related images, the user will be able to understand the structure (with the help of the screen reader). Also, because of how the image and caption are visually structured, the non-impaired-vision users will be able to tell that it is a caption. So this works both ways for all users.

Important note!
The alternative text is required to be used (even if it is left blank) because if it doesn’t, the screen reader will read out the src attribute instead, which is not good for the impaired vision users!

To use <figcaption> element, the <figure> is required. Otherwise, it will not work.

Sorry that this is a long one! But, I do hope this will answer your question :slight_smile:

18 Likes