Speisekarte mit semantisch korrekten Definitionslisten
Thursday, den 14. Juli 2005
Seit einiger Zeit ist es in der Diskussion: Das saubere »clearing« von fließenden Elementen (»float«) in HTML/XHTML. Perun verweist auf einen sehr interessanten Artikel, dessen Autor eine neue, offenbar gut funktionierende Variante dieses »clearing« ausgetüftelt hat.
Wie? Was? Clearing? Fließende Elemente?
Ich möchte mich jetzt – auf die Gefahr hin, mich wegen Abbruch des Themas lauten Buh-Rufen auszusetzen – aber gar nicht auf dieses Thema stürzen, denn mir geht es um etwas anderes. Siehe Titel.
Alessandro Fulciniti von wg entwickelt mit Hilfe seiner Methode eine hübsch anzusehende Speisekarte, in der er geschickt fließend positionierte Blocklevel-Elemente (DT, DD) innerhalb von Definitionslisten (DL) einsetzt. Sauberes Markup, sauberes CSS, wunderbar. Oder?
Was mir nicht so passt, ist, dass er aus einem für meine Begriffe nachrangigen Grund Definitionslisten unangemessen einsetzt: Um eine grafische Linie als Hintergrundgrafik wunschgemäß einsetzen zu können, setzt er jeden Listenpunkt (jedes Gericht seiner Karte) in eine eigene Definitionsliste (DL).
Das ist genau nicht der Sinn von Definitionslisten – und insofern mit Blick auf semantisch korrektes Markup nicht wirklich gut!
Da er seine Speisekarte in drei Speisen-Kategorien eingeteilt hat (Antipasti/Pasta/Pizza), sollte er genau drei Definitionslisten verwenden und jeweils die einzelnen zugehörigen Gerichte darin aufnehmen (DTs und DDs).
Also habe ich mir erlaubt, seine Speisekarte in dieser Hinsicht zu überarbeiten, dabei auf die grafische Linie zugunsten einer oberen Rahmenlinie (border-top) zu verzichten und stelle diese alternative Variante nun hier vor. Zwecks besserer Übersicht habe ich dass Stylesheet in eine eigene Datei ausgelagert.
Die Änderungen sind im Grunde marginal, im HTML-Quelltext der Speisekarte habe ich lediglich die Definitionslisten wie beschrieben umgebaut, und im Stylesheet ist die Definitionsliste (DL) von ihrem Hintergrundbild (dot.gif) befreit. Da nun die Abstände zwischen den einzelnen Speisen-Einträgen zusammenfallen, war noch ein geändertes padding plus die neue obere Rahmenlinie (border-top) in die Definition des dd.ingredients einzusetzen, um das ursprüngliche Layout zu erhalten.
Jetzt kann man beide Varianten vergleichen (Links folgen gleich noch einmal gesammelt) und sich herzlich darüber streiten, welche Trennlinie zwischen Speise und Beschreibung schöner ist – zumindest ich räume inzwischen dem semantisch ordentlichen Markup größere Bedeutung ein als der Gestaltung einer optischen Trennlinie…
Jetzt noch einmal geordnet die beschriebenen Quellen zum Anschauen, Lesen und Nachvollziehen:
