The HTML <figcaption> tag

Definition and Usage

<figcaption> Tagged as <figure> The element defines the title.

<figcaption> The element can be placed in <figure> The position of the first or last child element of the element.

See also:

HTML DOM Reference Manual:Figcaption 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="tulip.jpg" alt="Tulip" style="width:300px">
  <figcaption>Figure 1 - Tulip, Liliaceae, perennial herb.</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="tulip.jpg" alt="Tulip" style="width:300px">
  <figcaption>Figure 1 - Tulip, Liliaceae, perennial herb.</figcaption>
</figure>
</body>
</html>

Try It Yourself

Global Attributes

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

Event Attributes

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

Default CSS Settings

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

figcaption {
  display: block;
}

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