HTML img: Die vergessene Bildunterschrift

berge-im-bild

Artikel in Zeitschriften leben von ihren Bildern. Nein, eigentlich von den Bildunterschriften.

Wenn wir uns beim ersten Durchblättern eines Magazins entscheiden, ob wir einen Artikel lesen oder nicht, kommen die Bildunterschriften zum Zuge. Beim HTML img hat das W3X die Bildunterschrift allerdings vergessen.

Während die Tabelle von Kopf bis Fuß mit allem erdenklichen Schnickschnack ausgestattet wurde und Tabellen mit einer Überschrift und einer Zusammenfassung aufwarten, ist dem W3C eine Bildunterschrift für das img-Tag nie in den Sinn gekommen.

Natürlich könnten wir Bilder – also img-Tags – mit Bildunterschriften in div- oder span-Blöcke setzen – aber einen semantischen Zusammenhang können div- und span-Tags nicht herstellen.

Das dl-Tag ist eine Alternative. dl steht für »Definitionsliste« und ist eine elegante Erweiterung der ungeordneten Listen mit dem ul-Tag. Den Elementen der Liste werden nicht einfach Listensymbole vorangestellt, sondern ein Begriff.

<dl>
   <dt>Das dl-Tag</dt>
   <dd>leitet die Liste ein und beendet sie. </dd>
   <dt>Das dt-Tag </dt>
   <dd>stellt den Begriff dar, der definiert werden soll. 
      Die meisten Browser setzen den Begriff in eine eigene Zeile.</dd>
   <dt>dd -Tag </dt>
   <dd>stellt die Definition des Begriffs dar. Die meisten Browser 
   rücken die Definition des Begriffs um ein paar Pixel ein. </dd>
</dl>
Das dl-Tag
leitet die Liste ein und beendet sie.
Das dt-Tag
stellt den Begriff dar, der definiert werden soll. Die meisten Browser setzen den Begriff in eine eigene Zeile.
dd -Tag
stellt die Definition des Begriffs dar. Die meisten Browser rücken die Definition des Begriffs um ein paar Pixel ein.

Um an eine ordentliche Konstruktion für ein img-Tag mit Bildunterschrift zu kommen, sitzt das img-Tag im dt-Element und die Bildunterschrift im dd-Element des dl-Elements. Wie geschaffen für wahre Spartaner:

<dl class=“meImgLeft“ style=“width: 200px;“>
   <dt><img src=“bild.gif“ width=“200“ height=“150“ alt=“Rettungsanker“ /></dt>
   <dd>Bildlegende</dd>
</dl>

Nur ein Schnipsel im Stylesheet:

dl.meImgLeft { float: left; margin-right: 1em; }
// verhindert das Einrücken und
// den Abstand nach oben
dl.meImgLeft dt { margin-bottom: 0; }
dl.meImgLeft dd { margin: 0; }

Ein bisschen schade, dass dem dl-Tag noch zumindest die Breite in das style-Attribut gesetzt werden muss, denn alles, was mit der CSS-Eigenschaft float belegt ist, muss auch eine Breite angeben, sonst spannt sich das schwebende Element über die gesamte Breite des umfassenden Blocks auf.

Eine Alternative zu float ist display: inline-block, dann hat sich das Problem mit der Angabe einer Breite erledigt.

HTML5 figure

Auch wenn Internet Explorer in den älteren Versionen das figure-Tag nicht kennt, kann man es trotzdem einsetzen. figure ist für Bilder, Grafiken, Tabellen, usw. gedacht – eben für alles, was eine Unterschrift braucht. Zum figure-Tag gehört ein figcaption-Tag für die Unterschrift.

figure
figure und figcaption haben keine eigenen Stile. figcaption ist optional und darf vor oder hinter der Grafik sitzen.

Kommentare sind geschlossen.

9 Gedanken zu „HTML img: Die vergessene Bildunterschrift“

  1. Stefan Krüger – 12. August 2010

    @Bernhard: in das Alt Attribut soll ja auch eine Beschreibung rein. für den Fall das das Bild als Text ausgegeben werden muss (bild unerreichbar, screen-reader)

    Von der Logik der Definitionsliste stimme ich überein: Das Bild ist ‚der Begriff‘ und die Unterschrift die Definition dazu.
    Eine Quellenangabe gehört für mich mit zur Definition dazu.

    Lg Stefan

  2. Bernhard von AN24 – 30. Juni 2010

    Also Quellenangaben versuche ich mit der Bildunterschrift zu realisieren. Aber die Beschreibungen des Bildes sind für mich im Alt-Tag besser aufgehoben.

  3. Mike – 1. Februar 2010

    Die Möglichkeit mit den Definitionslisten kannte ich noch nicht, danke für den Tipp.
    Sieht gut aus ohne irgendwelche großen CSS Experimente.

  4. admin – 16. November 2009

    Missbrauch? Das ist aber an den Haaren herbeigezogen. Schließlich ist die Bildunterschrift eine Ergänzung zum Bild. span-Tags hingegen sind reine Transporter für CSS-Eigenschaften und haben keinerlei semantische Bedeutung.

    UH

  5. Johannes – 23. Oktober 2009

    Für diesen Zweck eine Definitionsliste zu verwenden ist Missbrauch, denn es wird nichts definiert und hat somit starke Ähnlichkeit mit dem in Verruf geratenen Layout über Tabellen. Der sauberste Weg ist imo immer noch die Verwendung eines Spans, das das Bild plus die Legende (in einem Inlineelement) umfasst.

  6. admin – 30. Mai 2009

    Hi, danke für den feinen Kommentar (es gab schon welche, aber bei irgendeinem Update sind mir die meisten Kommentare entwischt … ).
    Ja, und beim Zeilenabstand geb ich dir recht. Aber wie man sieht, überarbeite ich gerade mal wieder und da kümmere ich mich mal um die Zeilenabstände für meine Bildunterschriften.
    UH

  7. Ali – 29. Mai 2009

    Ein Jammer, dass noch kein Kommentar vorliegt – vielleicht liegt’s ja an der Preisgabe der Mail-Adresse …
    Der Artikel ist IMHO sehr konstruktiv. Viele unterschätzen den Sinn von Bildlegenden. Besonders bei Quellenangaben wird da viel Murks gemacht und diese (falscherweise) in das alt- oder title-Attribut geschrieben.
    Die oben vorgeschlagene Lösung ist dafür (fast) ideal – nur den Zeilenabstand könnte man vielleicht noch etwas verringern.