HTML figure und figcaption: Inhalte und Beschriftungen gruppieren
HTML <figure> gruppiert selbständige Inhalte wie Illustrationen, Diagramme oder Code zu einer Einheit, und <figcaption> liefert die Bildunterschrift. Platzieren Sie eine einzelne figcaption als erstes oder letztes Kind von figure; lassen Sie sie weg, wenn keine Bildunterschrift benötigt wird.
Ist figure nur für Bilder gedacht?
Sie können figure für Fotografien, Illustrationen, Diagramme, Codebeispiele oder Zitate verwenden, auf die der Text als ein Element verweist. Verwenden Sie div, wenn Sie nur einen Stilcontainer benötigen, und vermeiden Sie es, einen gesamten verwandten Abschnitt in figure einzuwickeln. Die Verwendung dieses Elements überprüft nicht automatisch das Urheberrecht oder die Quelle des Materials.
Das figcaption-Element beschreibt den übrigen Inhalt seines direkten figure-Elternelements. Es muss innerhalb von figure stehen, und jedes figure darf höchstens ein figcaption enthalten. Wenn Sie Erklärungen für oben und unten benötigen, fassen Sie diese in einem einzigen figcaption zusammen.
Komplettes Beispiel: Setzen Sie die Beschriftung zuerst oder zuletzt
Speichern Sie den folgenden Code als figures.html und öffnen Sie ihn in einem Browser. Das Beispiel zeichnet einfache Formen mit SVG (Scalable Vector Graphics), sodass es ohne separate Bilddateien funktioniert. Das erste Element hat seine Bildunterschrift vor der Grafik; das zweite hat sie nach der Grafik.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Positionen von figure-Beschriftungen vergleichen</title>
<style>
figure { margin: 1rem 0; max-width: 20rem; }
svg { display: block; width: 100%; height: auto; }
figcaption { padding: 0.5rem 0; }
</style>
</head>
<body>
<h1>Zwei Formen im Vergleich</h1>
<figure>
<figcaption>Abbildung A. Blauer Kreis</figcaption>
<svg viewBox="0 0 240 120" role="img" aria-label="Blauer Kreis in der Mitte eines hellen Hintergrunds">
<rect width="240" height="120" fill="#f0f3f5" />
<circle cx="120" cy="60" r="36" fill="#176e96" />
</svg>
</figure>
<figure>
<svg viewBox="0 0 240 120" role="img" aria-label="Oranges Quadrat in der Mitte eines hellen Hintergrunds">
<rect width="240" height="120" fill="#f0f3f5" />
<rect x="84" y="24" width="72" height="72" fill="#b35a12" />
</svg>
<figcaption>Abbildung B. Oranges Quadrat</figcaption>
</figure>
</body>
</html>Über dem Kreis steht „Abbildung A. Blauer Kreis“, unter dem Quadrat steht „Abbildung B. Oranges Quadrat“. Bei einem schmaleren Fenster wird das SVG auf die Breite des figure-Elements verkleinert. Vergleichen Sie die Positionen, indem Sie figcaption innerhalb von figure an die erste oder letzte Stelle verschieben; es bleibt innerhalb von figure.
Bildunterschriften und der alternative Text von Bildern haben unterschiedliche Rollen
Das figcaption-Element kann einen für alle Leser sichtbaren Titel, eine Erklärung oder eine Quellenangabe enthalten. Das alt-Attribut eines Bildes stellt Ersatzinhalt für Leser bereit, die das Bild nicht sehen können. Lassen Sie das alt-Attribut eines wichtigen Bildes nicht allein wegen einer vorhandenen Beschriftung leer und wiederholen Sie nicht jede Erklärung wortwörtlich an beiden Stellen.
Das Beispiel verwendet SVG anstelle von img, daher liefert es Beschreibungen der Formen mit role und aria-label. Für ein mit img eingefügtes Foto geben Sie src und alt zusammen mit den erforderlichen Maßen an. Wenn ein Diagramm numerische Vergleiche vermittelt, überlegen Sie, ob eine kurze Beschriftung ausreicht, und geben Sie die wichtigsten Daten auch im Text oder in einer Tabelle an.
Das figure-Element erzeugt nicht automatisch Bildunterschriften oder Abbildungsnummern, und seine Standardränder hängen vom Browser und CSS ab. Wenn eine Nummerierung erforderlich ist, sollte sie mit den Verweisen im Dokument konsistent sein. Der MDN-Referenz zu figure und der MDN-Referenz zu figcaption erklären die detaillierten Elementregeln.
