Speisekarte mit semantisch korrekten Definitionslisten
14. Juli 2005 – 22:29 Uhr
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:
- Alessandro Fulcinitis Original-Speisekarte
- Sein erläuternder Artikel dazu
- Meine Variante mit semantisch ordentlichen Definitionslisten
- Die Stylesheet-Datei dazu
- Peruns Artikel, der die Lawine losgetreten hat
Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.
Im Autohaus wird...
Dir auch einen guten Rutsch! Hokey
Am 20. Juli 2005 um 20:29 Uhr
Ich halte deine Variante der Karte für die wesentlich sinnvollere Lösung, sie funktioniert auch in gestalterischer Hinsicht einwandfrei – kein plausibler Grund also, das Markup zweckzuentfremden.
“ich räume inzwischen dem semantisch ordentlichen Markup größere Bedeutung ein als der Gestaltung einer optischen Trennlinie…”
Volle Zustimmung, die Semantik sollte imho eine höhere Priorität haben als gestalterische Feinheiten.
Am 3. August 2005 um 03:33 Uhr
Spam, daher editiert und umgeleitet:
Eierspeisen
Am 16. August 2005 um 16:44 Uhr
So, ich bin über Peruns Blog dahergekommen.
Hier hab’ dann nochmal die Diskussion über Sematik vs. Design gelesen.
Im Grunde halte ich die Semantik auch für wichtiger als das Design.
Aber es handelt sich doch hier um eine Speisekarte.
Solange man die Semantik nicht wirklich mißhandelt, kann man doch mal ein Auge zudrücken.
So eine Karte ist doch eher dazu gedacht, ausgedruckt zu werden, oder?
Zumal glaube ich, daß man die Karte auch mit der richtigen Semantik (so wie hier vorgestellt) aussehenlassen kann, wie das “Original” von wg. Dazu siehe Peruns Blog (muß evtl. noch freigeschaltet bzw. “moderiert” werden).
Am 16. August 2005 um 21:17 Uhr
Was unsereinen »Puristen« stört, ist der Umstand, wegen eines marginalen äußerlichen Effektes (der Linie) auf semantisch korrektes Markup zu verzichten. Oder mit anderen Worten: Ich schraube wieder am Quellcode, um einen Gestaltungsaspekt zu manipulieren. Das genau wollten wir doch mit dem Fortschritt in Richtung der Trennung von Markup und Präsentation überwinden (Stichwort Accessibility, Barrierefreiheit usw.)
Und bei der Speisekarte ergab sich gerade exemplarisch anhand eines einfachen Falles die Situation, das deutlich machen zu können.
Am 17. August 2005 um 00:14 Uhr
Sehe ich ja auch so.
Aber ist das bei einer Speisekarte von Relevanz?
Dient diese nur als Druckvorlage, oder wird sie so im Internet verwendet?
Wenn sie im Internet verwendet wird, dann geht die Semantik eindeutig vor.