HTML <figure> Tag

<figure> element is a self-contained content. It is generally used along with <figcaption>. The <figcaption> element is used to add a caption for the content which is used with <figure> element.

<figure> element is generally used for diagrams, illustrations, photos, code snippet etc.

Its positions is independent of the main flow, when it is related to the main flow.

The <figure> element comes in pairs. The content must be written between opening ( <figure>) and closing ( </figure>) elements.

Let's see an example:

<!DOCTYPE html>
<html>
   <body>
      <p>A cute baby</p>
      <figure>
         <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
      </figure>
   </body>
</html>

Here the result is:


Attributes:

<figure> tag which came along with HTML5 use the Global Attributes.