HTML <figcaption> tag

Definitie en gebruik

<figcaption> Het etiket is <figure> Het element definieert de titel.

<figcaption> Het element kan worden geplaatst in <figure> De positie van de eerste of laatste zoon van het element.

Zie ook:

HTML DOM Referentiemanual:Figcaption-object

Voorbeeld

Voorbeeld 1

Gebruik het <figure>-element om foto's in de document te markeren, gebruik het <figcaption>-element om de titel van de foto te definiëren:

<figure>
  <img src="tulip.jpg" alt="Tulip" style="width:300px">
  <figcaption>Figure 1 - Tulip, Liliaceae, perennial herb.</figcaption>
</figure>

Try it yourself

Voorbeeld 2

Gebruik CSS om de stijl van <figure> en <figcaption> te instellen:

<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 this element.

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