Bilder auf Webseiten beschriften

Mittels CSS haben Sie zwei Möglichkeiten, Bilder auf Webseiten zu beschriften: Per span für Bilder in einem Fließtextabsatz und per Defintionsliste für Bilder im eigenen Absatz. Peter Müller erklärt, wie es funktioniert.

Alle Welt spricht von semantischem HTML, aber HTML selbst macht die Auswahl eines zur Bedeutung des Inhalts passenden Elements manchmal nicht gerade leicht.

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: