Zum Inhalt springen

HTML <figcaption>-Tag

Das <figcaption>-Tag ist eines der HTML5-Elemente. Es wird verwendet, um dem Inhalt des <figure>-Tags eine Beschriftung oder Erläuterungen hinzuzufügen. Das <figcaption>-Tag wird in das <figure>-Element eingebettet und als erstes oder letztes Kindelement platziert. Wird es als erstes Kind platziert, erscheint die Beschriftung über dem Figure-Inhalt, bei Platzierung als letztes Kind darunter.

Im <figure>-Element kann nur ein <figcaption> verwendet werden. Das <figure>-Element kann jedoch auch andere Tags enthalten (<img> oder <code>).

Syntax

Das <figcaption>-Tag wird in öffnenden und schließenden Paaren verwendet. Der Inhalt wird zwischen dem öffnenden <figcaption>- und dem schließenden (</figcaption>)-Tag geschrieben.

Beispiel für das HTML <figcaption>-Tag:

HTML <figcaption>-Tag

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Ergebnis

figcaption example

Attribute

Das <figcaption>-Tag unterstützt die Globalen Attribute und Ereignisattribute.

So gestalten Sie ein HTML <figcaption>-Tag

Standardmäßig rendern Browser das <figcaption>-Element als Blockelement. Sie können sein Aussehen mit CSS anpassen:

css
figcaption {
  font-style: italic;
  color: #555;
  text-align: center;
  margin-top: 5px;
}

Praxis

Was ist die Funktion des HTML <figcaption>-Tags?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.