html-einfach.de

Semantisches HTML · Inhalte auszeichnen

figure & figcaption richtig nutzen

Von Zuletzt geändert am

Wenn ein Bild, ein Diagramm oder ein Codeblock zum Inhalt gehört, aber als eigenständige Einheit auf ihn Bezug nimmt, ist <figure> das passende Element – zusammen mit <figcaption> für die Beschriftung. Es ist eines der am meisten unterschätzten Struktur-Elemente, weil viele es nur als „Bild-Wrapper“ kennen.

Der Aufbau

<figure> umschließt den Inhalt, <figcaption> beschriftet ihn (als erstes oder letztes Kind):

<figure>
  <img src="/img/kontrast-beispiel.webp" alt="Zwei Farbpaare im Vergleich" width="800" height="450" />
  <figcaption>Links ausreichend Kontrast, rechts zu wenig.</figcaption>
</figure>

Die Beschriftung wird so eindeutig mit dem Inhalt verknüpft – für alle sichtbar und für Screenreader als zusammengehörig erkennbar.

Mehr als nur Bilder

<figure> ist nicht auf Bilder beschränkt. Es passt überall, wo ein referenzierter, in sich geschlossener Inhalt eine Beschriftung verdient:

<figure>
  <pre><code>const summe = (a, b) =&gt; a + b;</code></pre>
  <figcaption>Beispiel 1: eine einfache Pfeilfunktion.</figcaption>
</figure>

Auch Diagramme, Tabellen oder ein längeres Zitat können in einer <figure> stehen. Das Kennzeichen ist immer: Der Inhalt wird aus dem Fließtext referenziert („siehe Beispiel 1“) und ließe sich an eine andere Stelle verschieben, ohne den Lesefluss zu zerreißen.

figcaption ist nicht alt

Eine häufige Verwechslung: <figcaption> und das alt-Attribut sind nicht dasselbe.

  • Das alt beschreibt den Bildinhalt für Menschen, die das Bild nicht sehen.
  • Die <figcaption> ist eine sichtbare Bildunterschrift für alle – oft mit Zusatzinfo („Quelle“, „Abb. 3“).

Beide dürfen nebeneinander existieren und sollten sich nicht wörtlich wiederholen.

Randnotiz – Bildunterschriften werden gelesen. Bildunterschriften gehören zu den meistgelesenen Textbausteinen einer Seite, und Suchmaschinen werten sie mit aus. Eine gute <figcaption> ist damit auch ein Beitrag zum Bild-SEO – sie erklärt das Bild im Kontext, statt es nur zu zeigen.

Wann besser kein figure?

Nicht jedes Bild braucht eine <figure>. Ein dekoratives Inline-Bild oder ein Icon mitten im Text ist keine eigenständige, referenzierte Einheit – hier genügt ein schlichtes <img> (bei Deko mit leerem alt=""). <figure> lohnt erst, wenn der Inhalt eine Beschriftung trägt und für sich steht.

Häufige Fehler

  • <figure> für jedes Layout-Bild, auch ohne Beschriftung und Bezug.
  • <figcaption> als Ersatz fürs alt – beide haben verschiedene Aufgaben.
  • Beschriftung als loser <p> neben dem Bild statt als <figcaption> darin.
  • Mehrere <figcaption> in einer <figure> (genau eine ist vorgesehen).
  • Deko-Bild in <figure>, wo ein <img alt=""> gereicht hätte.

Häufige Fragen

Muss eine figure immer ein Bild enthalten?

Nein. Code, Diagramme, Tabellen oder Zitate sind genauso passend. Entscheidend ist der referenzierte, eigenständige Charakter – nicht die Art des Inhalts.

Oben oder unten – wohin mit der figcaption?

Beides ist erlaubt; sie muss das erste oder letzte Kind sein. Üblich und erwartbar ist die Beschriftung unter dem Inhalt.

Brauche ich dann noch ein alt am Bild?

Ja. Die <figcaption> ersetzt den Alternativtext nicht. Das Bild braucht weiterhin ein passendes alt (oder leeres alt="", wenn es rein dekorativ ist).

Fazit

<figure> mit <figcaption> zeichnet referenzierte, in sich geschlossene Inhalte samt Beschriftung aus – Bilder ebenso wie Code, Diagramme oder Zitate. Die Beschriftung ist für alle sichtbar und ersetzt nicht das alt. Eingesetzt, wo Inhalt wirklich für sich steht, schafft es Struktur statt nur einen weiteren Container.