HTML <figcaption> Tag

Definition und Verwendung

<figcaption> Der Bezeichner ist <figure> Das Element definiert den Titel.

<figcaption> Das Element kann platziert werden <figure> Position des ersten oder letzten Kindelements des Elements.

Siehe auch:

HTML DOM Referenzhandbuch:Figcaption-Objekt

Beispiel

Beispiel 1

Verwenden Sie das <figure>-Element, um Bilder in Dokumenten zu kennzeichnen, und das <figcaption>-Element, um den Titel des Bildes zu definieren:

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

Try It Yourself

Beispiel 2

Stellen Sie mit CSS die Stile für <figure> und <figcaption> ein:

<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