Bilder beschriften mit Definitionslisten

Wenn die Bilder im Fließtext außerhalb eines Block-Elements platziert sind, bietet sich der Einsatz von Definitionslisten an.

Erstens sind Definitionslisten zur Bildbeschriftung semantisch einigermaßen sinnvoll, wenn man das Bild als Definitionsbegriff und die Beschreibung als Erklärung dazu betrachtet. Und zweitens besteht eine Definitionsliste aus mindestens drei Elementen, wodurch sich im CSS hervorragende Gestaltungsmöglichkeiten eröffnen:

• dl ("definition list") umschließt die gesamte Liste

• dt ("definition term") für den zu definierenden Begriff

• dd ("definition (list) definition") für die Erklärung

Ein einfaches Quelltextbeispiel für eine Definitionsliste sieht so aus:

<dl>
   <dt>Zu definierender Begriff (definition (list) term)</dt>
   <dd>Definition oder Beschreibung (definition definition)</dd>
</dl>

Diese Liste sieht im Browser ungestaltet etwa so aus:

Eine ungestaltete Definitionsliste

Cascading "Stile": das Foto zur Beschriftung

In diesem Abschnitt erstellen Sie mithilfe einer Definitionsliste eine Beschriftung für das folgende Foto: