How to use figure and figcaption semantic elements

In this post we will learn how to use two semantic elements figure and figcaption, which came in HTML5, they serve respectively to display an image and its description.

How to use figure and figcaption semantic elements?

First, let’s talk about figure, this is for displaying images in HTML pages semantically.

Inside the <figure> tag, we insert an <img> tag with the image and optionally a <figcaption> tag with the description/caption of the image.

What is also important to mention is that the tag figure is independent of the page context.

Therefore, the mainstream or main subject is independent of this image.

So that it can be reused in more places on the site.

Of course, the figure and figcaption semantics add a lot of semantics to our code when they are allied on a web page.

Using figure and figcaption in practice:

Let’s now see the complete structure of the figure and figcaption tags, in a supposed project

HTML:

<figure>
     <img src="image.png">
     <figcaption>Post cover of figure and figcaption semantic elements</figcaption>
</figure>

Final result:

Note that visually all this structure could be replaced by a div in place of the figure and a p in place of figcaption.

But for semantic purposes in HTML, the approach used in this post is more recommended.

And since well-written and semantic HTML has more relevance to Google, it would be ideal for you to adapt to semantic elements in your future projects.

Conclusion

In this post, we saw that the figure tag serves to display images of any type on our site semantically.

Inside the figure tag, we must add an img tag, which contains the image link.

And optionally the figcaption tag to add a description to the image

Also checkout our YouTube channel by clicking here! We have a lot of web tutorials 🙂

And that’s it for today, until the next post!