Für das Auszeichnen von Bildunterschriften und die Gruppierung mehrerer Bilder gab es vor HTML5 keine syntaktisch korrekten Möglichkeiten. Mit HTML5 gibt es die beiden Elemente FIGURE und FIGCAPTION, die genau diese Lücke schließen und die sich in aktuellen Browser bereits einsetzen lassen.
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 CAPTURE-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?
Weiterführende Links zum Thema HTML5:
HTML5 Please! Alle Features im Überblick
HTML5: Pflichtfelder und Eingabevorgaben für Formulare festlegen
HTML5: Sandbox-Modus für IFrames
HTML5: Eingabefeld mit Vorschlägen als Dropdownliste
HTML5: Überschriften und Einleitungen von Artikeln gruppieren
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 CAPTURE-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?
Weiterführende Links zum Thema HTML5:
HTML5 Please! Alle Features im Überblick
HTML5: Pflichtfelder und Eingabevorgaben für Formulare festlegen
HTML5: Sandbox-Modus für IFrames
HTML5: Eingabefeld mit Vorschlägen als Dropdownliste
HTML5: Überschriften und Einleitungen von Artikeln gruppieren