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.

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