HTML5 - When to use <figure>

It`s all about semantics in the modern web development. But with this semantic, there comes a bunch of confusion as which tags are supposed to be used when. When HTML5 came up with a bunch of new semantic elements, there was one such element <figure>. Now, we already had <img>, so what extra does the figure tag add to it?

Definition of figure tag by W3C

According to W3C,

“The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.”

Difference between figure and img tag

The difference between the figure and the image tag is pretty simple. The image tag is used to embed the image in an HTML document whereas the figure tag is used to semantically organize the content of an image in the HTML document.
It is critical to note that these two elements are not interchangeable. Both of these elements are equally important in their respective places. You cannot use a figure tag to embed an image in the HTML5 document, try adding the src attribute to the figure tag in the same manner as of img tag, and you will notice that the image is not displayed. So, for adding the image, nothing has changed in the HTML5 documentation we still use the img tag for the same. Then what has changed?
Before HTML5 if there was a need for us to add the caption for an image, we had to use some p tag or span tag, and by defining some class to it, we could style those captions. So, there wasn`t a way to add a caption to the image semantically through HTML, but with the figure tag, there is a dedicated tag just for the captions of the image known as <figcaption>. This tag by default separates the styles of the usual paragraph with the captions. But using a figcaption tag every time you use a figure tag is not mandatory, it is optional.

Semantic Difference

Let us look at a code example which will create a clear picture of what we are talking.

Let us look at the output webpage of this example code.

Now let us look at the same example, with figure tag instead of div tag for organising the content.

Let us see the output of this code.

See the difference! As you can notice I haven`t used any styling properties in the code, still there is a difference in the alignment of the image and the caption, the figure tag is responsible for all of this. But apart from the default alignment and styling changes which figure tag provides, the primary advantage which it has is, it also allows various computer programs to understand your content better. For a human, it is pretty easy to differentiate between a paragraph and an image, but for machines, it doesn`t hold good for the same. By machines, I am implying Google Search Engine or even your web browser for that matter.
The whole point behind semantics is, talking to these machines and instructing them which part of the HTML5 document conveys what. In the first case of our example with the div tag, while going through those instructions, the computer programs did not get a clue of what was there under that div tag. We can embed anything under div tag, how does our web browser is supposed to know about it? But in the second case with figure tag instead of the div tag, it tells the web browser that an image is going to embedded under this tag.
Suppose you have a bunch of image in an HTML document, you can use a figure tag to nest all those images inside that figure tag.
Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements be it a block of code, images, audios.

Note: Figure tag is not only restricted to images, but we can also use figure tag to wrap up some audios, videos or even some charts or tables, blocks of codes.
But it can`t be used to wrap up anything and everything. For example, any graphical content should not be embedded under the figure tag. Instead, use the img tag.

Differences between <aside> and <figure>

While we are at it, let us also look at the differences between aside and figure element.
We should always choose between the two elements on the basis of two factors:

1. If the content is solely related to the main content and not essential, go for <aside>.
2. If the content is necessary but its position in the flow of content is not that valuable, go for <figure>.

However, if the content is related to previous or the upcoming part of the content use the other semantics elements, for example, div, section, etc., according to how the content is related.

Conclusion

It`s all about semantics in the modern web development. So whichever tag you choose must satisfy the semantic requirement of the content the same applies to the figure tag too. As I told you earlier, figure tag is used to align the content semantically, and also what we are not able to visualize from our naked eye is that it helps the machines in understanding your content better, which is the whole point behind semantics. So there are ample amount of places where this element can be used, but special care must be taken that it is just the appropriate element for the job.

Read More