Understanding Figure Elements in HTML

We need to use figure elements to define figure contents in a html page and this post contains details about the same.

Photo by Boston Public Library on Unsplash

Introduction

What is a figure element? A figure element written as <figure> is required to indicate pictures, drawings, code snippet listings, quotes, diagrams, illustrations eatc or any such content , that is part of the main content in the web page, but, exists independently with regards to it’s position in the main flow of the content and even if it is removed from the content of that web page, it will not interfere with the configuration of the main content. Let us see in more details how to use this figure element in an html web page.

Using the figure element to define an Image

As you can see from the below code, the figure element has an opening and closing tag , <figure> and </figure> tags respectively and within the figure elements we use the <img> tag with the src attribute pointing to the url link of the image that we want to add here as an image. After we add the image, we add the figcaption element in order to write a descriptive short line below the picture as shown below. I have written a cute caption called, “My Studious Cat” right below the image after adding the image code. Note that the caption is written between the open and closed figcaption elements, that is, <figcaption> and </figcaption>

<figure> <img src="https://i.imgur.com/hE7BbkV.png" alt="cat reading code" style="width:100%"> 
<figcaption>Fig.1 - My Studious Cat.</figcaption>
</figure>

Using the figure element to define a quote

In the below example, we have used the figure element to define a quote and for this we have written the quote within the figure elements but note that we have also written the blockquote elements here right below the figure element, and the blockquote tags are only used for displaying quotes. We have also written the figcaption elements here for writing the caption below the quote, “Unknown Author”

<figure>

<blockquote>

If you have nothing to be grateful for, check your pulse!

</blockquote>

<figcaption>Unknown Author</figcaption>

</figure>

Conclusion

You have learnt how to use the figure and figcaption elements to define images and quotes in html web page and just remember that it is not just limited to images and quotes, it can be used to define code snippets, favicons, illustrations, drawings, etc., for defining these independently positioned content within your main flow of content.

For more such content: