CSS, HTML und Javascript mit {stil}

HTML figure / figcaption • Abbildungen und Bildunterschriften

HTML figure / figcaption

HTML figure ist ein Container für Bilder, Grafiken und andere Abbildungen (z.B. Tabellen), der anstelle des allgemein gehaltenen div-Tags verwendet werden kann.

figcaption ist der Behälter für eine Bildunterschrift oder die Legende der Abbildungen.

Bis HTML5 gab es kein besonderes Markup für Abbildungen und die Unterschriften von Bildern oder Grafiken. Während in Zeitschriften oder Büchern kaum ein Bild oder eine Abbildung ohne Unterschrift eingesetzt wird, gab es für die Bildunterschrift in HTML kein semantisches Markup im Standard.

HTML figure umschließt eine oder mehrere Abbildungen im weitesten Sinne. Das figure-Tag ist keinesfalls auf Bilder oder Grafiken beschränkt. Es kann ebensogut SVG- oder Math-Objekte, Tabellen oder Videos enthalten – am besten lässt sich der Einsatz mit Abbildungen in Fachbüchern vergleichen. Dabei soll aber nicht jedes Bild in ein figure-Tag – beim Logo einer Seite z.B. macht ein figure-Tag keinen Sinn.

figure ersetzt das allgegenwärtige div-Tag für Gruppen von zusammen gehörenden Elementen, die als Ergänzung der Seite hervorgehoben werden sollen.

Nussbällchen, Zitronen-Törtchen, Erdbeer-Streusel
figure, figcaption { display:block; clear:both }
…
<figure class="box">
   <img src="food-1" width="200" height="200" alt="Nuss">
   <img src="food-1" width="200" height="200" alt="Zitrone">
   <img src="food-1" width="200" height="200" alt="Streusel">
   <figcaption>Nussbällchen, Zitronen-Törtchen, Erdbeer-Streusel</figcaption>
</figure>

figure ist nicht auf Bilder und Grafiken begrenzt, sondern sinnvoll für Abbildungen im weiten Sinn: Tabellen, Code-Passagen, Charts und Video oder Backrezepte mit Bildern. Was in einem Fachbuch von einem aufmerksamen Grafiker in einen Kasten gesetzt würde, passt auf der Webseite in ein figure-Element.

HTML figcaption

Das figcation-Tag innerhalb von figure ist optional, kann vor oder nach der Abbildung stehen und stellt einen erklärenden Text (die Unterschrift oder Legende oder die Lizenzbestimmung) der Abbildung dar.

Innerhalb des figcaption-Tags können beliebige weitere HTML-Tags benutzt werden nicht spricht dagegen, den Elementen eines figure-Elements auch eine Überschrift und Links in a-Tags mit auf den Weg zu geben.

Ohne weitere Formatierung durch eigenes CSS erbt der Inhalt von figcaption die CSS-Eigenschaften des umfassenden Elements – wird also weder kursiv noch fett, nicht kleiner oder größer dargestellt.

figure / figcaption Darstellung

Die Browser stellen figure ohne zusätzliches CSS in eine neue Zeile, den Text in einem dazugehörigen figcaption-Tag allerdings nicht. Das figure-Element wird um 40 Pixel rechts und links eingezogen.

Browser, die figure und figcaption nicht unterstützen (IE7, IE8), ignorieren das figure-Tag, erstellen keinen Einzug und stellen die Inhalte von figure und figcaption inline im Fluss des umfassenden HTML-Elements dar.