figure und figcaption: Inhalte mit Beschriftung
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>Verwandt: img · picture · Semantisches HTML