Wichtig ist, dass das Ganze semantisch korrekt bleibt und mit möglichst wenig zusätzlichen Tags auskommt. Hier nun der Ansatz von Ulrike Häßler:
Wir benutzen eine Definitions-Liste, die ja bekanntlich dazu dient, einen Begriff mit entsprechenden Definitionen oder Erklärungen in Verbindung zu bringen. Wenn man nun das Bild als Begriff sieht, kann man eine Definitionsliste benutzen, um die Definition als Bildunterschrift zu setzen. Mit ein Wenig Style sieht das Ganze auch aus wie gewollt und floated sogar…
(Beispiel von der Entdeckerin!)
- Bildlegende
Passendes CSS:
dl.meImgLeft { float: left; margin-right: 1em; }
dl.meImgLeft dt { margin-bottom: 0; }
dl.meImgLeft dd { margin: 0; } // verhindert das Einrücken und den Abstand nach oben
So und der gewagte DOM Hacker könnte das Ganze dann noch automagisch regeln, indem er den TitleTag ausliest und dann das entsprechende XHTML um das Bild herum erstellt. Aber diese Arbeit soll denen überlassen sein, die es können.