figure und figcaption: Inhalte mit Beschriftung

vom 24.07.2011 von Oliver Misch

Ein <figure> fasst einen Inhalt und seine Beschriftung zu einer Einheit zusammen, wie die nummerierten Abbildungen in einem Buch. Meistens steckt ein Bild drin, es dürfen aber genauso Diagramme, Codebeispiele oder Zitate sein. Die Beschriftung übernimmt <figcaption>.

Syntax und Beispiel

HTML-Code

<figure>
    <img src="demo-diskette.png" alt="Pixelgrafik einer blauen Diskette"
         width="120" height="120">
    <figcaption>Abbildung 1: 1,44 MB reichten damals für alles.</figcaption>
</figure>

Ergebnis

Die Regeln

• Die figcaption ist optional, aber wenn sie da ist, steht sie als erstes oder letztes Kind im figure. Pro figure gibt es höchstens eine.
• alt-Text und figcaption ergänzen sich, sie ersetzen sich nicht. Das alt beschreibt was auf dem Bild ist, die figcaption ordnet es ein. Denselben Text in beide zu schreiben ist doppelt gemoppelt und nervt Screenreader-Nutzer.
• Ein figure ist als eigenständige Einheit gedacht: Man könnte es an eine andere Stelle des Dokuments verschieben (etwa in einen Anhang), ohne dass der Fließtext kaputt geht.

Wann figure, wann nacktes img?

Nicht jedes Bild braucht ein figure. Das Logo im Kopfbereich oder ein kleines Icon im Text sind einfach Bilder, ein img genügt. Zum figure greifst du wenn der Inhalt eine Beschriftung verdient oder du dich im Text auf ihn beziehst ("siehe Abbildung 2"). Wer mag, packt auch Codebeispiele hinein:

<figure>
    <pre><code>console.log("Hallo Welt");</code></pre>
    <figcaption>Listing 3: Der Klassiker unter den ersten Zeiln.</figcaption>
</figure>

figure kann mehr als Bilder

Das Element ist nicht auf Fotos beschränkt: Alles was eine in sich geschlossene, beschriftbare Einheit bildet, darf in ein figure, Codebeispiele, Diagramme, Tabellen, sogar Zitate:

<figure>
    <pre><code>body { max-width: 700px; }</code></pre>
    <figcaption>Listing 3: Die Lesespalte begrenzen</figcaption>
</figure>

Fachartikel nutzen genau das für ihre nummerierten Listings und Abbildungen. Die Kernbedeutung bleibt immer gleich: Dieser Block gehört zum Inhalt, könnte aber auch woanders stehen (etwa in einem Anhang), ohne dass der Fließtext bricht. Das unterscheidet ihn von einem Bild mitten im Satzz.

Mehrere Bilder, eine Unterschrift

Auch das geht: Ein figure darf mehrere img enthalten die sich eine gemeinsame figcaption teilen, praktisch für Vorher-Nachher-Paare oder kleine Serien. Die Unterschrift steht dabei wahlweise als erstes oder letztes Kind im figure, dazwischen darf sie nicht. Und die alte Merkregel von der img-Seite gilt weiter: alt beschreibt das einzelne Bild, die figcaption spricht über die Einheit als Ganzes, zwei Ebenen, zwei Aufgabenn.

Verwandt: img · picture · Semantisches HTML