HTML <figcaption>Tag

Das <figcaption>-Tag ist eines der HTML5-Elemente. Es definiert eine Beschriftung oder Beschreibung für den Inhalt eines <figure>-Elements. Es muss das erste oder letzte Kind-Element des <figure> sein. Als erstes Kind-Element wird die Beschriftung oberhalb des Figure-Inhalts gerendert; als letztes Kind-Element unterhalb.

Ein <figure> darf nur ein einziges <figcaption> enthalten, das Figure-Element selbst kann jedoch viele Arten von eigenständigen Inhalten umschließen: ein <img>, eine <code>-Auflistung, eine <table>, ein <blockquote>, ein Diagramm und mehr.

Warum `<figcaption>` statt `<p>` verwenden?

Man könnte ein <p> neben ein Bild setzen, und optisch würde es gleich aussehen. Der Unterschied liegt in der Semantik und ist vor allem für die Barrierefreiheit relevant.

Wenn eine Beschriftung als <figcaption> innerhalb eines <figure> ausgezeichnet ist, verknüpft der Browser die Beschriftung programmatisch mit dem Figure-Element. Hilfstechnologien wie Screenreader geben beide zusammen aus — der Nutzer hört, dass es sich um eine Figure handelt, und hört die Beschriftung als deren Label. Ein einfaches <p> ist lediglich unzusammenhängender Text, der zufällig daneben steht; nichts teilt der Maschine mit, dass er zum Bild gehört.

Verwende daher <figure> + <figcaption>, wenn die Beschriftung Teil des Inhalts ist (und man erwarten würde, dass beides zusammen verschoben wird, wenn die Seite neu angeordnet wird). Verwende ein einfaches <p> für normalen Fließtext.

Syntax

Das <figcaption>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden <figcaption> und dem schließenden (</figcaption>) Tag, und das Element befindet sich innerhalb eines <figure>:

<figure>
  <!-- figure content, e.g. an image, code block, or table -->
  <figcaption>Caption text</figcaption>
</figure>

Beispiel des HTML `<figcaption>`-Tags:

HTML <figcaption>-Tag

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

Probier es selbst »

Ergebnis

Beschriftung zuerst oder zuletzt

Verschiebe das <figcaption>, um zu steuern, wo die Beschriftung erscheint. Nichts anderes ändert sich — nur seine Position unter den Kind-Elementen der Figure.

Beschriftung unterhalb des Bildes (letztes Kind-Element):

<figure>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>

Beschriftung oberhalb des Bildes (erstes Kind-Element):

<figure>
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>

`<figcaption>` über Bilder hinaus verwenden

Ein <figure> eignet sich für jede eigenständige Einheit, die man beschriften möchte — es ist nicht auf Bilder beschränkt.

Beschriftung einer Code-Auflistung

Umschließe einen <pre>- / <code>-Block, damit die Auflistung und ihre Beschriftung zusammengehören:

<figure>
  <figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
  <pre><code>console.log("Hello, world!");</code></pre>
</figure>

Beschriftung einer Tabelle

<figure>
  <figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
  <table>
    <tr><th>Code</th><th>Meaning</th></tr>
    <tr><td>200</td><td>OK</td></tr>
    <tr><td>404</td><td>Not Found</td></tr>
  </table>
</figure>

Hinweis: Eine <table> besitzt ein eigenes eingebautes Beschriftungselement, <caption>, das die üblichere Wahl für eine einzelne Datentabelle ist. Verwende <figure>/<figcaption>, wenn die Tabelle eine von mehreren beschrifteten Figures in einem Dokument ist oder wenn du eine Beschriftung im Stil „Tabelle 1" möchtest, die als Figure gelesen wird.

Beschriftung eines Zitats

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

Weitere Informationen zum Zitieren externer Quellen findest du im <blockquote>-Tag.

Barrierefreiheit: `alt` ist kein `figcaption`

Es ist leicht, das alt-Attribut eines Bildes mit einem <figcaption> zu verwechseln, aber sie erfüllen unterschiedliche Zwecke und sollten sich nicht duplizieren:

alt ist die Textalternative des Bildes. Es ersetzt das Bild, wenn es nicht angezeigt werden kann (defekter Link, langsame Verbindung oder ein nicht-visueller Nutzer). Es beschreibt, was das Bild zeigt. Ein Screenreader liest es anstelle des Bildes vor.
<figcaption> ist eine Beschriftung — ergänzende Informationen zur Figure, die auch ein sehender Leser sieht. Sie fügt oft Kontext hinzu, den das Bild allein nicht vermittelt ("Fig.1 – Umsatz stieg um 20 % gegenüber dem Vorjahr").

Beide können gleichzeitig auf dieselbe Figure angewendet werden:

<figure>
  <img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
  <figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>

Hier beschreibt alt das Visuelle ("ein Balkendiagramm, das in jedem Quartal ansteigt"), damit nicht-visuelle Nutzer die Daten erhalten, während das <figcaption> die Beschriftung hinzufügt, die alle sehen. Lass alt nicht leer und formuliere es aussagekräftig, auch wenn eine Beschriftung vorhanden ist.

Attribute

Das <figcaption>-Tag unterstützt die globalen Attribute und Event-Attribute.

Wie man ein HTML <figcaption>-Tag gestaltet

Standardmäßig rendern Browser das <figcaption>-Element als Block-Level-Element. Du kannst sein Aussehen mit CSS anpassen:

figcaption {
  font-style: italic;
  color: gray; /* muted text so the caption reads as secondary */
  text-align: center;
  margin-top: 5px;
}

Ein vollständiges ausführbares Beispiel, das die Beschriftung gestaltet und der Figure einen dezenten Rahmen gibt:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled figcaption</title>
    <style>
      figure {
        border: 1px solid lightgray;
        padding: 10px;
        display: inline-block;
        text-align: center;
      }
      figcaption {
        font-style: italic;
        color: gray;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Übung

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

Eine Beschriftung programmatisch mit einem <figure>-Element zu verknüpfenNur Bilder zu beschriften, niemals andere InhalteEine Überschrift für einen Abschnitt oder eine Seite bereitzustellenAufzählungspunkte in einer Liste zu erstellen

Warum <figcaption> statt <p> verwenden?