Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Bilder und Bildunterschriften in HTML5 auszeichnen

    Bilder und Bildunterschriften in HTML5 auszeichnen

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 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)
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:

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

6 Reaktionen
Michael Lambertz

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.

Antworten
denis.potschien
denis.potschien

@me²: Ja, das ist wirklich peinlich. Danke für den Hinweis.

Antworten
me²
me²

CAPTURE?! Das ist wirklich ein wenig peinlich bei einem so kurzen Artikel, bei dem der korrekte Code auch noch tatsächlich kurz davor steht...

Antworten
denis.potschien
denis.potschien

Was die Darstellung des IMG-Elementes betrifft, hat „also eigentlich“ natürlich recht. Ich habe den Absatz korrigiert.

Antworten
also eigentlich
also eigentlich

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.

Antworten
Daniel

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 :-)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen