<figure>

Zuletzt aktualisiert am 4. Februar 2026

Das <figure>-Element gruppiert eigenständige Inhalte wie Bilder, Diagramme, Code-Beispiele oder Zitate mit einer optionalen Beschriftung (<figcaption>). Es signalisiert dem Browser und Screenreadern: “Dieser Inhalt gehört zusammen und hat eine Legende.” Ohne <figure> wäre ein Bild mit Unterschrift einfach ein Bild gefolgt von Text, semantisch zusammenhanglos.

Grundlagen

Stell dir <figure> wie einen Bilderrahmen mit Beschriftungsschild vor. Der Inhalt im <figure> ist ein in sich geschlossener Block, der aus dem Textfluss herausgenommen werden könnte, ohne dass der umgebende Text seinen Sinn verliert. Genau das unterscheidet <figure> von einem einfachen <div>: Es drückt aus, dass der Inhalt eigenständig ist.

• <figure> gruppiert einen Inhalt (Bild, Code, Zitat, etc.) mit einer optionalen Beschriftung (<figcaption>)
• Der Inhalt ist eigenständig: Er könnte in einen Anhang verschoben werden, ohne dass der Haupttext unverständlich wird
• <figcaption> kann als erstes oder letztes Kind von <figure> stehen: über oder unter dem Inhalt
• Browser zeigen <figure> standardmäßig mit Einrückung (Margin links und rechts) an
• <figure> ist nicht nur für Bilder. Es eignet sich für alles, was eine Legende braucht: Code-Blöcke, Tabellen, Diagramme, Zitate
• Die implizite ARIA-Rolle ist figure, die der Browser automatisch setzt

Syntax

<figure>
  <img src="landschaft.jpg"
       alt="Eine weite Berglandschaft mit Nebel">
  <figcaption>
    Morgennebel über den Alpen,
    aufgenommen im Oktober 2025.
  </figcaption>
</figure>

Beispiele

Bild mit Bildunterschrift

Der klassische Anwendungsfall: Ein Foto mit erklärendem Text darunter. So kennt man es aus Zeitungen, Magazinen und wissenschaftlichen Arbeiten.

<figure>
  <img src="sonnenuntergang.jpg"
       alt="Sonnenuntergang über dem Meer
            mit orangefarbenen Wolken">
  <figcaption>
    <strong>Abbildung 1:</strong>
    Sonnenuntergang an der Nordsee.
  </figcaption>
</figure>

Code-Beispiel mit Beschriftung

<figure> ist nicht nur für Bilder. Ein Code-Block mit Erklärung ist genauso ein gültiger Anwendungsfall, besonders in technischer Dokumentation und Tutorials.

<figure>
  <pre><code>const greet = (name) => {
  return `Hallo, ${name}!`;
};

console.log(greet("Mario"));</code></pre>
  <figcaption>
    Eine Arrow-Function, die einen
    personalisierten Gruß zurückgibt.
  </figcaption>
</figure>

Zitat als Figure

Auch Blockzitate profitieren von <figure>, besonders wenn du die Quelle als Beschriftung angeben willst. Das ist semantisch korrekter als ein <footer> im <blockquote>.

<figure>
  <blockquote>
    "Jeder Fehler ist eine Gelegenheit,
    etwas Neues zu lernen."
  </blockquote>
  <figcaption>Quelle: Unbekannt</figcaption>
</figure>

Bild-Galerie in einer Figure

Mehrere zusammengehörige Bilder können in einer einzigen <figure> gruppiert werden, mit einer gemeinsamen Beschriftung.

<figure>
  <img src="fruehling.jpg"
       alt="Kirschblüten im Frühling">
  <img src="sommer.jpg"
       alt="Grüne Wiese im Sommer">
  <img src="herbst.jpg"
       alt="Bunte Blätter im Herbst">
  <figcaption>
    Der Stadtpark im Wandel der Jahreszeiten.
  </figcaption>
</figure>

Barrierefreiheit

<figure> hat die implizite ARIA-Rolle figure. Wenn ein <figcaption> vorhanden ist, verwendet der Screenreader dessen Text als zugänglichen Namen für die gesamte Figure. Nutzer können so gezielt zwischen Figures auf der Seite navigieren.

Wichtig: <figcaption> ersetzt nicht das alt-Attribut eines Bildes. Das alt beschreibt den Bildinhalt für Nutzer, die das Bild nicht sehen können. Die <figcaption> liefert zusätzlichen Kontext: eine Erklärung, Quellenangabe oder Bildnummer. Beides ist nötig.

Wenn du das aria-label oder aria-labelledby-Attribut auf dem <figure> setzt, überschreibt das den Text aus <figcaption> für Screenreader. Normalerweise ist das aber nicht nötig.

Häufige Fehler

<figure> für jedes Bild verwenden: <figure> ist für eigenständige Inhalte gedacht, die eine Beschriftung brauchen. Ein dekoratives Bild oder ein Bild im Textfluss braucht kein <figure>. Wenn das Bild ohne Beschriftung auskommt und fest im Text verankert ist, reicht ein einfaches <img>.

alt-Attribut weglassen, weil <figcaption> vorhanden ist: <figcaption> und alt haben unterschiedliche Aufgaben. Das alt beschreibt den Bildinhalt, die <figcaption> liefert Kontext. Beide sind nötig. Ein Bild ohne alt ist ein Barrierefreiheits-Problem, unabhängig davon, ob eine Caption vorhanden ist.

<figcaption> außerhalb von <figure>: Eine <figcaption> ohne umschließendes <figure> hat keine semantische Bedeutung. Der Browser zeigt den Text zwar an, aber die Verbindung zum Inhalt fehlt.

<figure> als Layout-Container missbrauchen: <figure> ist nicht dafür da, Inhalte zu gruppieren, die keinen eigenständigen Charakter haben. Für Layout-Zwecke gibt es <div>, für thematische Gruppierung <section>.

Browser-Kompatibilität

Das figure-Element wird von allen modernen Browsern vollständig unterstützt. Die ARIA-Rolle figure wird automatisch gesetzt.

Email-Kompatibilität

Die Unterstützung von figure in Email-Clients ist eingeschränkt. Die semantische Bedeutung geht oft verloren, aber die Inhalte werden meistens angezeigt.

Verwandte Elemente