<figcaption>

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.

Steckbrief <figcaption>

Kategorie: Links & Medien
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

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

Beispiele

3 Beispiele

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

index.html

Bildunterschrift

<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>

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

index.html

Quellenangabe

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

index.html

Figcaption oberhalb

<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

3 Fehler

01 <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.

02 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.

03 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

5 von 5

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

Chrome

Komplett

Seit Chrome 8
Firefox

Komplett

Seit Firefox 4
Safari

Komplett

Seit Safari 5.1
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett

figure und figcaption werden korrekt gerendert.
Gmail

Teilweise

Der Text wird angezeigt, aber als generischer Block. Inline-Styles für korrekte Darstellung verwenden.
Outlook

Teilweise

Inhalte werden angezeigt, aber die semantische Bedeutung geht verloren. Tabellen-Layout als Alternative.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Text wird angezeigt, aber Standard-Styling kann abweichen.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<figcaption>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter