Bildunterschriften in XHTML (update)
Fast alle Layout-Elemente, die man sich vorstellen kann, haben eine Entsprechung in der Fülle der sematischen XHTML-Tags: Ein Zitat wird mit <blockquote> beschrieben, eine erste Tabellenzeile mit <thead> und so weiter.
Doch wie Ulrike Häßler jetzt richtig festgestellt hat, fehlt eine Definition für Bildunterschriften. Doof. Doch sie empfiehlt, damit es halbwegs semantisch bleibt, in Fällen akuter Bildunterschriftnotwendigkeit, eine Definitionsliste <dl></dl> zu setzen mit dem Bild als Hauptitem <dt></dt> und der Bildunterschrift als Definition <dd></dd>.
Ich finde: Eine clevere Lösung. Mehr Info hier.
update: Laborforschung: Im Vergleich mit einer sehr eleganten Alternativlösung (über das alt-Tag und :after) hat René eine kleine Demo der XHTML-Bildunterschriften gebaut, vielen Dank! (Sieht ganz danach aus, dass nur Herr Opera mit dem Auslesen des alt-Tags etwas anfangen kann. Kann das sein??)
Holger am 27. September 2004 #
Sehr kewl, danke für diesen Tipp.René am 27. September 2004 #
Die Idee ist nicht dumm – aber in der Praxis wohl etwas zu aufwendig … derzeit haue ich Bildunterschriften eigentlich in das alt=-Attribut. Man müßte Attribute mit CSS sichtbar machen können …Martin am 27. September 2004 #
Kann man:img:after {content:attr(alt);}René am 27. September 2004 #
Die Idee ist eigentlich genial mitcontent...img:after { content:attr(alt);
display:block}
.h
{float:left; padding:10px;}
so erscheinen die Bilder nacheinander, und die Kommentare dazu untendrunter … leider derzeit nur im Opera (zwangsweise müßte ein span-Tag drumherum). FireFox läßt sich von display nicht beeindrucken …
René am 27. September 2004 #
Firefox läßt sich doch beeindrucken …das muß auch ein
display:blockbekommen …Gerrit van Aaken am 28. September 2004 #
Sehr sehr feines MOSe, René. Hast Du ein Testlabor gemacht zum Gucken und Prüfen??Jens Meiert am 28. September 2004 #
Leider keine empfehlenswerte Loesung, siehe meinen (zugegebenermassen kurzen) Beitrag bei EfA—nicht nur ginge dies auch (alter Hut) ueber Ruby-Markup, sondern sind beide Ansaetze IMHO semantischer “Bloedsinn”.Kai Laborenz am 28. September 2004 #
Ich finde die content-Lösung sehr elegant. Dumm halt, dass sie nicht im IE funktioniert. Aber man könnte natürlich den Dean-Edwards-IE7-Hack verwenden…Gerrit am 29. September 2004 #
@Kai: Der Hack ist eine nette Idee, nur ein bisschen an der Zielgruppe vorbei, deshalb habe ich das auch nicht im Blog angesprochen: Wer so hochgradig interessiert ist an CSS, dass er den IE zu fixen gedenken könnte, der ist normalerweise schon lange gar kein IE-Nutzer mehr. Und es ist leichter zu sagen: Wechsel zum Firefox, als: Installiere doch bitte diese 17 Hacks und Workarounds …Gerrit am 29. September 2004 #
René: Um noch mal was zur Semantik des alt-Tags zu sagen: Ganz richtig ist das ja auch blöderweise nicht. Das alt-Tag soll das beschreiben, was auf dem Bild zu sehen ist. Doch die Bildunterschrift gibt in den meisten Fällen noch eine Zusatzinformation, oder steht manchmal sogar in einem Kontarstverhältnis zum Bild. Wollte ich nurmal zu denken geben.René am 29. September 2004 #
Also FireFox 0.9 interpretiert es genauso wie Oper 7.23 … nur der IE kann damit nix anfangen, das ist aber nix neues ;-)und zum Thema Semantik: Man sollte Diskussionen nicht in Uferlose treiben lassen. Jeder empfindet es aus semantischer Sicht ggf. doch anders. Meine Seite basiert grundlegend auf Definitionslisten: Titel – Beitrag. Einige fanden das als gut gelöst, andere sprachen von Elementmißbrauch. Solange man das Ziel `Trennung Layout-Inhalt´ vor Augen hat, sollten eigentlich keine gravierenden Fehler passieren.
Jens Meiert am 29. September 2004 #
Rene: Nehmen wir doch< div > Ueberschrift < /div >als wunderbares Beispiel fuer die Trennung von Struktur und Praesentation an, wobei “Ueberschrift” einen Kontext impliziert, in dem dieser Abschnitt wirklich eine Ueberschrift repraesentiert—dann “passiert” sehr wohl ein “gravierender Fehler”, denn unser kleines Snippet hier entbehrt (per definitionem) jeglicher Semantik. Nicht schoen.Die Definition einer “definition list” ist nebenbei bemerkt recht interessant, da nicht streng “mathematisch”—so wird in der Spezifikation als Beispiel auch ein Dialog genannt (letzer Absatz) [1].
[1] http://www.w3.org/TR/xhtml2/mod-list.html#sec_11.1..
Kai Laborenz am 29. September 2004 #
@Gerrit: Der IE7-Hack erfordert keine Modifikation auf Userseite! Man muss als Entwickler den Link auf das entsprechende Archiv in die Website einfügen – das wars.Der einzige Nachteil ist die zusätzliche Ladezeit…
René am 29. September 2004 #
mmmh … warum muß ich als Entwickler dem Browser sagen, was er reinladen soll? Der böse Entwickler würde doch sagen: lade dir da diese schöne Virenbehaftete Modifikation herein …Thomas Scholz am 30. September 2004 #
Ich würde für die Unterschrift unbedingt das TITLE-Attribut benutzen, wenn man denn überhaupt diesen Weg geht. Das ALT-Attribut soll das Bild ja ersetzen, nicht beschreiben. Außerdem sieht es ungeheuer mißglückt aus, wenn man ohne Bilder surft: Alles doppelt. ;)