<figure>

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.

Steckbrief <figure>

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

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

index.html

Grundsyntax

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

Beispiele

4 Beispiele

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

index.html

Bild mit Unterschrift

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

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

index.html

Code-Beispiel

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

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

index.html

Zitat als Figure

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

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

index.html

Bild-Galerie

<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

4 Fehler

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

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

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

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

5 von 5

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

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 figure in Email-Clients ist eingeschränkt. Die semantische Bedeutung geht oft verloren, aber die Inhalte werden meistens angezeigt.

Apple Mail

Komplett

figure und figcaption werden korrekt gerendert.
Gmail

Teilweise

Der Inhalt wird angezeigt, aber die figure-Einrückung (Standard-Margin) wird entfernt. Inline-Styles verwenden.
Outlook

Teilweise

Inhalte werden angezeigt, aber figure wird als generischer Block behandelt. Tabellen-Layout empfohlen.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Darstellung funktioniert, aber Standard-Margins werden entfernt.

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

<figure>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter