The HTML <figure> Tag

Definition and Usage

<figure> The tag specifies self-contained content, such as illustrations, charts, photos, code lists, etc.

Although <figure> The content of the element is related to the main content, but its position is independent of the main content flow. If it is deleted, it should not affect the document flow.

Tip:Please use <figcaption> element For <figure> Add a title to the element.

See also:

HTML DOM Reference Manual:Figure Object

Instance

Example 1

Use the <figure> element to mark photos in the document, and use the <figcaption> element to define the title of the photo:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figure 1 - Trulli in the Puglia region of Italy.</figcaption>
</figure>

Try It Yourself

Example 2

Use CSS to set the styles of <figure> and <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figure 1 - Trulli in the Puglia region of Italy.</figcaption>
</figure>
</body>
</html>

Try It Yourself

Global Attributes

<figure> The tag also supports Global Attributes in HTML.

event attributes

<figure> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <figure> Element:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version to fully support the element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Note: The <figure> tag is a new tag in HTML 5.