Element DL - richtig eingesetzt?

[Marc Schwarz]

Hallo

Ich schreibe momentan meinen Online Shop in ein tabellenloses Design um. Da ich zum ersten Mal so programmiere, bin ich in vielen Dingen noch etwas unsicher.

Hier ist mal die URL zum Shop:
http://www.lederetuis.ch

Für die Auflistung der Topsellers, die 2 kleinen Boxen sowie die 1 grosse Box darunter und die Wochenaktionen auf der rechten Seite habe ich jeweils das Element DL - mit DT und DD zur Darstellung genutzt.

Frage:
Ist dies semantisch korrekt, oder hab ich hier die Definitionsliste komplett falsch eingesetzt?

Danke

[Gernot Back]

Hallo Marc,

Für die Auflistung der Topsellers, die 2 kleinen Boxen sowie die 1 grosse Box darunter und die Wochenaktionen auf der rechten Seite habe ich jeweils das Element DL - mit DT und DD zur Darstellung genutzt.

Frage:
Ist dies semantisch korrekt, oder hab ich hier die Definitionsliste komplett falsch eingesetzt?

Ich finde, du hast die Definitionsliste in durchaus korrekter Weise eingesetzt. Wenn es in einer Tabelle jeweils nur zwei Spalten, d.h. in jeder Zeile jeweils nur eine TH-Zelle und eine zugeordnete TD-Zelle gäbe, ist meines Erachtens die Definitionsliste strukturell gesehen die bessere Wahl, obwohl das DUDEN-Bedeutungswörterbuch den Begriff "Liste" auch als "[alphabetisch in Form einer Tabelle angeordnete] Zusammenstellung von unter einem bestimmten Gesichtspunkt aufgeführten Personen oder Sachen" definiert.

http://forum.de.selfhtml.org/archiv/2006/1/t122319/#m791381

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Für die Auflistung der Topsellers, die 2 kleinen Boxen sowie die 1 grosse Box darunter und die Wochenaktionen auf der rechten Seite habe ich jeweils das Element DL - mit DT und DD zur Darstellung genutzt.

Bei den zwei kleinen Boxen ergibt eine Liste allerdings nur wenig Sinn, wenn von vornherein klar ist, dass diese immer nur jeweils einen Eintrag enthalten. Das ist dann keine Liste und wird es dann ja auch nie werden.

Gruß Gernot

[Marc Schwarz]

Hallo

Vielen Dank für die Antworten.

Ich werde sicher mal vorläufig die unteren 2 kleinen Boxen sowie die 1 grössere Box umschreiben, da diese ja wirklich keine echten Listen sind.

Gruss
Marc

[molily]

Hallo,

Wenn es in einer Tabelle jeweils nur zwei Spalten, d.h. in jeder Zeile jeweils nur eine TH-Zelle und eine zugeordnete TD-Zelle gäbe, ist meines Erachtens die Definitionsliste strukturell gesehen die bessere Wahl

Natürlich geben sich <th scope="row">Produktname</th><td>Beschreibung</td> und <dt>Produktname</dt><dd>Beschreibung</dd> nicht viel, aber die zwei Zellen, th und td, tauchen hier dummerweise beide im dd-Element auf und der Inhalt der gedachten th-Zelle findet sich auch nur als Alternativtext einer Grafik im dt-Element.

Eine solche Struktur jedenfalls ist redundant und die dl einfach überflüssig:

<dt><a><img alt="Titel"></a></dt>
<dd>
  <h2>Titel</h2>
  <p>Text</p>
</dd>

Hier wird der Titel zweimal ausgezeichnet und der Titel im betitelten Abschnitt (dd) noch einmal wiederholt und dort noch einmal als solcher ausgezeichnet... äh.

Einen Textabschnitt mit einem Titel zu versehen, geht erstmal so:

<h2>Titel</h2>
<p>Text</p>

Wenn man den Zusammenhang herausstellen will bzw. muss, dann halt ein div drum. Möglich, wenn auch streitbar, ist eine Kapselung von mehreren solcher Abschnitt mit einer ol.

Wenn dort jetzt noch eine Grafik hinein soll, würde ich sie ohne Alternativtext (höchstens mit title) im h2-Element unterbringen.

<h2><img>Titel</h2>

Dann halt mit CSS floaten lassen oder wie man's halt wünscht.

Mathias

[Gernot Back]

Hallo Mathias,

Natürlich geben sich <th scope="row">Produktname</th><td>Beschreibung</td> und <dt>Produktname</dt><dd>Beschreibung</dd> nicht viel, aber die zwei Zellen, th und td, tauchen hier dummerweise beide im dd-Element auf und der Inhalt der gedachten th-Zelle findet sich auch nur als Alternativtext einer Grafik im dt-Element.

Eine solche Struktur jedenfalls ist redundant und die dl einfach überflüssig:

<dt><a><img alt="Titel"></a></dt>
<dd>
  <h2>Titel</h2>
  <p>Text</p>
</dd>

Das sehe ich anders. Bei einem bebilderten Fachwörterbuch oder einer Legende von Icons könnte als Lemma/Definiendum doch auch der abgebildete Gegenstand/das Icon fungieren, zunächst mit dessen (Fach-)Bezeichnung als Überschrift definiert, gefolgt von einer Beschreibung zu dessen Spezifika. Beides zusammen bildet das Definiens.

Der Normalfall bei einem Fachwörterbuch ist natürlich der umgekehrte: Zuerst, weil alphabetisch sortierbar, die Bezeichnung als Lemma/Definiendum und dann als Definiens eine Beschreibung der Spezifika nebst Abbildung, gleichberechtigt nebeneinander.

Das da, an dem ich selbst _mit_gewirkt habe (Javascript erforderlich!), hätte man durchaus noch besser strukturieren können.

Gruß Gernot

[molily]

Hallo,

Das sehe ich anders. Bei einem bebilderten Fachwörterbuch oder einer Legende von Icons könnte als Lemma/Definiendum doch auch der abgebildete Gegenstand/das Icon fungieren, zunächst mit dessen (Fach-)Bezeichnung als Überschrift definiert, gefolgt von einer Beschreibung zu dessen Spezifika. Beides zusammen bildet das Definiens.

Das ist natürlich ein anderer Fall. Wenn ich zu einem Bild eine Beschreibung liefern will und das Bild als Definiendum auffasse, dann ist es sinnlos, den beschreibenden Titel nochmal im alt-Text aufzuführen - das wollte ich nur sagen. In deinem Beispiel wird sinnigerweise alt="" verwendet. Eine solche dl funktioniert als »Definitionsliste« aber nur dann, wenn die Grafik auch angezeigt und wahrgenommen wird. Ansonsten kommt für einen Screenreader <dt></dt><dd>Bildtitel, Bildbeschreibung</dt> heraus, was problematisch ist, wenn die Beschreibung ohne das Bild ihren Sinn verliert.

Mathias

[Gernot Back]

Hallo molily,

Wenn ich zu einem Bild eine Beschreibung liefern will und das Bild als Definiendum auffasse, dann ist es sinnlos, den beschreibenden Titel nochmal im alt-Text aufzuführen - das wollte ich nur sagen.

Da hast du allerdings Recht: Die Angabe von etwas anderem als einer leeren Zeichenkette oder dem Hinweis

"Bitte benutzen Sie für unser Bildlexikon
 ein visuelles Ausgabemedium, in dem Bilder
 auch darggestellt werden, sonst hat das doch
 keinen Sinn, Sie Trottel, was denken Sie
 sich denn, sind Sie noch ganz bei Trost?!"

;-) im ALT-Attribut des Bildes führt zu einer Tautologie.

Gruß Gernot

[molily]

Hallo,

Die Frage der »semantischen Korrektheit« bei dl ist ziemlich müßig, da die Bedeutung ohnehin schlecht definiert ist und dl faktisch für Zuordnungen jeglicher Art verwendet wird.
Sonderlich stimmig finde ich die Anwendung hier nicht, weil es keine wirkliche Trennung zwischen Produktnamen und -beschreibung gibt. Der Name steckt sowohl im dt (in Form des Alternativtextes der Grafik) als auch im dd. Eine dl-Struktur ist da ziemlich willkürlich, da könnte man auch einfach z.B. <p class="produktfoto">, <hX class="produktname"> und <p class="produktbeschreibung"> oder so verwenden, alle Produkte dann in einer ol.

Mathias