Anzeige
Anzeige
News
Artikel merken

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.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
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
Denis Potschien

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

Antworten
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

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

Antworten
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige