Bilder und Bildunterschriften in HTML5 auszeichnen

Dabei ist das FIGURE-Element nicht ausschließlich für Bilder geeignet. Grundsätzlich ist das Element für sich selbst stehende Inhalte gedacht, die ergänzende Informationen zu einem Dokument beinhalten. Es können also auch Videos, Tabellen und Diagramme mit dem FIGURE-Element umschlossen werden.
Bild und Bildunterschrift zusammenbringen
Neben dem FIGURE-Element, das die genannten Inhalte umschließt, lässt sich mit dem dazugehörigen FIGCAPTION-Element eine Beschreibung für den Inhalt auszeichnen:
<figure> <img src="skyline.jpg" width="800" height="600" alt="Skyline" /> <figcaption>Sicht auf tolle Skyline</figcaption> </figure>
Die meisten Browser stellen das FIGURE-Element leicht eingerückt dar, das FIGCAPTION-Element wird direkt darunter angezeigt – so wie man klassischerweise Bildunterschriften darstellt. Allerdings lässt sich die Darstellung per CSS sehr leicht anpassen, sodass man mit einigen Zeilen schon eine ordentliche Gestaltung für das FIGURE-Element samt Inhalt hinbekommt:
figure { padding: 5px; float: left; border: 1px solid #cccccc; border-radius: 5px; } figure img { border-radius: 3px 3px 0 0; } figure figcaption { padding: 2px 4px 2px 4px; background-color: #636363; color: #cccccc; font-style: italic; border-radius: 0 0 3px 3px; }
Ohne zusätzliche Klassenangaben kann das Aussehen per CSS angepasst werden. Außerdem werden Bild und Bildunterschrift mit semantischem Bezug zueinander dargestellt, was bisher nicht möglich war.

HTML5: FIGURE-Element pur (links) und per CSS gestaltet (rechts)
Mehrere Bilder zusammenbringen
Das FIGURE-Element kann auch mehrere Bilder oder andere Elemente beinhalten. Allerdings darf es pro FIGURE-Element nur ein FIGCAPTION-Element geben. Das FIGCAPTION-Element kann am Anfang oder Ende stehen:
<figure> <img src="skyline1.jpg" width="800" height="600" alt="Skyline" /> <img src="skyline2.jpg" width="800" height="600" alt="Skyline" /> <figcaption>Sicht auf tolle Skyline</figcaption> </figure>
Die Bildunterschrift erstreckt sich über die gesamte Breite der dargestellten Bilder. Mit dem FIGURE-Element lassen sich sehr schön kleine Galerien erstellen und innerhalb eines Textes einbinden.
Andere Inhalte zusammenbringen
Wie anfangs geschildert, lassen sich beliebige Inhalte über das FIGURE-Element zusammenbringen. Das kann ein Video sein oder eine Tabellen, wenn diese nicht als Bestandteil eines Textes, sondern als Ergänzung zum Inhalt einer Seite wahrgenommen werden sollen.
Nutzt ihr das FIGURE- und das FIGCAPTION-Element bereits? Habt ihr weitere Anwendungsbeispiele dafür?
Bei HTML5 hat man den Eindruck, dass sich da echt Leute Gedanken um die realen Bedürfnisse von Entwicklern und Benutzern gemacht habe, Wenn nun noch die Browser-Hersteller artig mitspielen, wird das Internet mit HTML5 einfacher, intuitiver, semantischer und nicht zuletzt ohne Plugins multimedial. Eine erfreuliche Entwicklung :-)
Bisschen nitpicking ;-). „Normalerweise würden Bilder über das IMG-Element untereinander angeordnet, insofern per CSS nichts anderes angegeben wurde.“ Das ist so nicht ganz richtig. Das img-Element ist standardmäßig ein Inline-Element. Inline-Elemente sind vom Browser als Fließtext auszugeben, demzufolge werden Bilder nebeneinander bzw. nacheinander im Textfluss angezeigt und nicht untereinander. Der Browser ist aber natürlich angewiesen mehrere Bilder dem Textfluss entsprechend umzubrechen, sobald die Viewport-Breite nicht mehr ausreicht um die Bilder nebeneinander in einer Zeile anzuzeigen.
Was die Darstellung des IMG-Elementes betrifft, hat „also eigentlich“ natürlich recht. Ich habe den Absatz korrigiert.
CAPTURE?! Das ist wirklich ein wenig peinlich bei einem so kurzen Artikel, bei dem der korrekte Code auch noch tatsächlich kurz davor steht…
@me²: Ja, das ist wirklich peinlich. Danke für den Hinweis.
Problematisch wird es dann, wenn die Bildunterschrift länger wird als das Bild breit ist. Hier habe ich vorerst folgende Lösung: figure {display: table; width: 1%}
Bin mir aber nicht sicher wie weit die funktioniert und sinnvoll ist, v. a. für mobile Devices.