HTML <figure> Tag

The <figure> tag is used for indicating self-contained content. The tag can include images, diagrams, illustrations, code examples, etc.

The content of the <figure> tag is related to the main flow content, however, it is perceived as an autonomous unit.

To add a caption or explanation to the content of the <figure> tag, we use the <figcaption> tag. The <figcaption> tag is included in the <figure> tag and is placed as the first or last child element. If <figcaption> is the first nested element, then the content will be displayed at the top of the image.

Syntax

The tag content is written between the opening (<figure>) and the closing (</figure>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <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>

Result

Attributes

The <figure> tag supports the Global Attributes and the Event Attributes.

Browser support
6+ 9+ 4+ 5+ 11.1+

Prev
Next