HTML <figure>-Tag
Der <figure>-Tag enthält Bilder, Diagramme, Illustrationen u. v. m. Beschreibung, Attribute und Beispiele.
Der <figure>-Tag kennzeichnet eigenständige Inhalte — eine Einheit, die aus dem Hauptfluss des Dokuments heraus referenziert wird, aber für sich allein vollständig ist. Häufig enthält er ein Bild, aber er kann genauso gut ein Diagramm, eine Illustration, ein Code-Listing, ein Zitat oder eine Tabelle umschließen.
Der <figure>-Tag gehört zu den HTML5-Elementen.
Was „eigenständiger Inhalt" bedeutet
Ein Inhalt gilt als „eigenständig", wenn er an eine andere Stelle verschoben werden könnte — in eine Seitenleiste, einen Anhang oder die nächste Seite — ohne den Sinn des umgebenden Textes zu verändern. Im Fließtext mag stehen „siehe Abbildung unten", doch die Abbildung selbst muss nicht an genau dieser Stelle stehen, um verständlich zu sein.
Das ist der entscheidende Grund, <figure> einem einfachen <img> vorzuziehen:
- Semantik, nicht nur Layout.
<figure>teilt dem Browser und der assistiven Technologie mit „dies ist eine referenzierte, eigenständige Illustration", während ein einfaches<img>lediglich ein Inline-Bild im Text ist. - Es gruppiert den Inhalt mit seiner Bildunterschrift. Ein
<figure>verknüpft ein Bild (oder Code oder Zitat) mit seiner Beschreibung, sodass beide als ein logischer Block zusammenbleiben. - Behandlung durch Screenreader. Viele Screenreader kündigen ein
<figure>als eigenständige Figurenregion an und lesen sein<figcaption>als Bezeichnung der Abbildung vor, sodass Nutzer die Erklärung direkt mit dem visuellen Element verbunden hören.
Ist ein Bild rein dekorativ oder fließt es inline als Teil eines Satzes ein, genügt ein einfaches <img> — <figure> kommt zum Einsatz, wenn der Inhalt eine referenzierte, mit Bildunterschrift versehene Einheit ist.
Eine Bildunterschrift mit <figcaption> hinzufügen
Um die Abbildung zu beschriften oder zu erklären, wird ein <figcaption>-Element innerhalb von <figure> verschachtelt. Es muss das erste oder letzte Kind des <figure> sein — erstes Kind, um die Bildunterschrift über dem Inhalt anzuzeigen, letztes Kind, um sie darunter anzuzeigen.
Ein <figure> darf höchstens ein <figcaption> enthalten.
Syntax
Der <figure>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<figure>) und dem schließenden (</figure>) Tag geschrieben.
Beispiel: <figure> mit <figcaption>
Dies ist die häufigste Verwendung — ein Bild gepaart mit einer Bildunterschrift:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The Eiffel Tower at sunset (see Figure 1).</p>
<figure>
<img
src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt="The Eiffel Tower silhouetted against an orange sky"
width="250"
height="200"
/>
<figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
</figure>
</body>
</html>Beispiel: ein Code-Listing
Ein <figure> ist eine natürliche Umrahmung für ein referenziertes Code-Beispiel. Die Bildunterschrift kann das Listing benennen:
<figure>
<figcaption>Listing 1. A minimal HTML page.</figcaption>
<pre><code><!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>Hello, world!</body>
</html></code></pre>
</figure>Siehe <pre> und <code> für die Formatierung von Code.
Beispiel: ein Zitat
Ein herausgezogenes Zitat, das im Text referenziert wird, kann eine Abbildung sein, mit der Quelle in der Bildunterschrift:
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>Siehe <blockquote> für die Auszeichnung von Zitaten.
Beispiel: eine Tabelle
Tabellarische Daten, die als Abbildung referenziert werden, können ebenfalls umschlossen werden:
<figure>
<figcaption>Table 1. Browser market share.</figcaption>
<table>
<tr><th>Browser</th><th>Share</th></tr>
<tr><td>Chrome</td><td>65%</td></tr>
<tr><td>Safari</td><td>19%</td></tr>
</table>
</figure>Siehe <table> für den Aufbau von Tabellen.
Der Unterschied zwischen <figure> und <aside>
Beide Elemente gruppieren verwandte Inhalte, beantworten jedoch unterschiedliche Fragen.
<figure>enthält Inhalte, die Teil des Hauptflusses sind — das Dokument verweist darauf („wie in Abbildung 1 gezeigt"). Würde man sie entfernen, bliebe eine hängende Referenz übrig. Verwende es für Bilder, Diagramme, Code-Listings und Zitate, auf die der Text verweist.<aside>enthält Inhalte, die nebensächlich sind — Seitenleisten, verwandte Links, herausgezogene Zitate oder Werbeeinheiten. Der Haupttext ist weiterhin vollständig lesbar, selbst wenn der<aside>entfernt wird, weil nichts im Fließtext darauf verweist.
Konkretes Beispiel: Ein Diagramm mit der Bildunterschrift „Abbildung 2: Request-Lifecycle", das der Artikel bespricht, ist ein <figure>. Eine eingerahmte Liste „Verwandte Artikel" neben demselben Absatz ist ein <aside>.
Barrierefreiheit
<figure>hat eine implizite ARIA-Rollefigure;role="figure"muss nicht manuell hinzugefügt werden.- Wenn vorhanden, dient ein sichtbares
<figcaption>als zugänglicher Name (Label) der Abbildung, sodass Screenreader-Nutzer die Erklärung direkt mit dem Inhalt verknüpft erhalten. Ein echtes<figcaption>istaria-labelvorzuziehen, damit sehende und nicht-sehende Nutzer denselben Text sehen. - Bei Bildern dienen der
alt-Text des<img>und das<figcaption>unterschiedlichen Zwecken:altbeschreibt das Bild für Nutzer, die es nicht sehen können, während die Bildunterschrift für alle zusätzlichen Kontext liefert. Vermeide es, in beiden exakt denselben Wortlaut zu verwenden.
Attribute
Der <figure>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.