dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Neben den bekannteren Formen von Listen in HTML, der ungeordneten <ul> und der geordneten oder nummerierten Liste <ol>, gibt es einen weiteren vielseitigen Listentyp: die Definitionsliste <dl>. Die Definitionsliste stellt zwei Listenelemente zur Verfügung: den Definitionsausdruck (definition term) <dt> und die Definition (definition data) <dd>.

Das W3C hat sich bei der Elementdefinition nicht nur sehr flexibel gezeigt^*, was die vielseitige Verwendbarkeit von Definitionslisten angeht, es hat uns Webdesignern darüber hinaus auch keine Beschränkung auferlegt, wie viele Definitionsausdrücke <dt> und Definitionen <dd> wir in einem Zusammenhang verwenden. Wir verfügen mit der Definitionsliste also über ein semantisch vielseitiges Element.
(more…)

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