<figcaption>

Zuletzt aktualisiert am 4. Februar 2026

Das <figcaption>-Element liefert eine Beschriftung oder Legende für den Inhalt eines <figure>-Elements. Es ist die semantisch korrekte Art, einem Bild eine Unterschrift zu geben, ein Code-Beispiel zu erklären oder die Quelle eines Zitats anzugeben. Ohne <figcaption> fehlt die formale Verbindung zwischen Inhalt und Beschreibung.

Grundlagen

<figcaption> funktioniert nur innerhalb von <figure>: dort liefert es den beschreibenden Text, den Screenreader als Namen der Figure verwenden. Denk an eine Museumsausstellung: Das Bild hängt an der Wand (<figure>), und das kleine Schild darunter ist die <figcaption>.

• <figcaption> muss ein direktes Kind von <figure> sein
• Es kann als erstes oder letztes Kind stehen: über oder unter dem Inhalt
• Pro <figure> sollte es maximal ein <figcaption> geben
• Es kann beliebigen Flow-Content enthalten: Text, <p>, <em>, <a>, Listen und mehr
• Screenreader verwenden den Text als zugänglichen Namen für die gesamte Figure
• <figcaption> ersetzt nicht das alt-Attribut eines Bildes: beide haben unterschiedliche Aufgaben

Syntax

<figure>
  <img src="foto.jpg" alt="Ein Beispielfoto">
  <figcaption>
    Beschreibung des Bildes oder Quellenangabe.
  </figcaption>
</figure>

Beispiele

Bildunterschrift

Der häufigste Anwendungsfall: Ein Bild mit erklärender Unterschrift, wie man es aus Artikeln, Blogs und wissenschaftlichen Arbeiten kennt.

<figure>
  <img src="regenwald.jpg"
       alt="Dichter tropischer Regenwald
            mit Nebel">
  <figcaption>
    Der Amazonas-Regenwald bedeckt rund
    5,5 Millionen Quadratkilometer und
    produziert etwa 20% des weltweiten
    Sauerstoffs.
  </figcaption>
</figure>

Quellenangabe und Copyright

<figcaption> eignet sich hervorragend für Copyright-Hinweise und Quellenangaben. Du kannst Links und Formatierungen einbauen.

<figure>
  <img src="stadt.jpg"
       alt="Panorama einer Stadt bei Nacht">
  <figcaption>
    Foto: <a href="https://example.com">
      Max Mustermann</a> / Unsplash |
    Lizenz: <a href="https://creativecommons.org
      /licenses/by/4.0/">CC BY 4.0</a>
  </figcaption>
</figure>

Figcaption oberhalb des Inhalts

<figcaption> muss nicht unter dem Inhalt stehen. Als erstes Kind von <figure> erscheint es oberhalb, nützlich für Tabellen oder Code-Beispiele, bei denen die Erklärung vor dem Inhalt sinnvoller ist.

<figure>
  <figcaption>
    Listing 1: HTTP-Request mit fetch()
  </figcaption>
  <pre><code>const response = await fetch("/api/users");
const users = await response.json();
console.log(users);</code></pre>
</figure>

Barrierefreiheit

Wenn ein <figcaption> vorhanden ist, verwenden Screenreader dessen Text als zugänglichen Namen für das umschließende <figure>. Das hilft blinden Nutzern, Figures auf der Seite zu identifizieren und zwischen ihnen zu navigieren.

Ganz wichtig: <figcaption> ist kein Ersatz für das alt-Attribut eines Bildes. Die beiden haben unterschiedliche Aufgaben:

• alt beschreibt den Bildinhalt: “Ein golden Retriever liegt auf einer grünen Wiese”
• <figcaption> liefert Kontext: “Unser Bürohund Balu an seinem Lieblingsplatz”

Ein Bild ohne alt bleibt ein Barrierefreiheits-Problem, auch wenn eine <figcaption> vorhanden ist. Screenreader lesen das alt beim Bild und die Caption bei der Figure. Beides hat seinen Platz.

Häufige Fehler

<figcaption> außerhalb von <figure>: Eine <figcaption> ohne umschließendes <figure> hat keine semantische Bedeutung. Der Browser zeigt den Text zwar an, aber Screenreader erkennen ihn nicht als Bildbeschriftung. Die semantische Verbindung zum Inhalt fehlt komplett.

Mehrere <figcaption> in einer <figure>: Pro <figure> sollte es nur ein <figcaption> geben. Wenn du mehrere einfügst, verwenden Browser und Screenreader möglicherweise nur das erste oder verhalten sich unvorhersehbar. Fasse die Informationen stattdessen in einer einzigen <figcaption> zusammen.

alt-Attribut weglassen, weil <figcaption> vorhanden ist: <figcaption> beschreibt den Kontext, alt den Bildinhalt. Beide werden gebraucht. Wenn ein Bild rein dekorativ ist (was bei Figures selten der Fall ist), kann alt="" gesetzt werden, aber nicht einfach weggelassen.

Browser-Kompatibilität

Das figcaption-Element wird von allen modernen Browsern vollständig unterstützt. Es wurde zusammen mit dem figure-Element in HTML5 eingeführt.

Email-Kompatibilität

Die Unterstützung von figcaption in Email-Clients ist eingeschränkt. Der Text wird meist angezeigt, aber die semantische Verbindung zum Bild geht verloren.

Verwandte Elemente