Ein visuelles Beispiel.
Betrachten wir ein Beispiel für einen Inhalt.
Semantisch gesehen kann man diesen Inhalt als zwei zusammenhängende Blöcke betrachten. Ein Block heißt „Ausgaben verfolgen“ und enthält einige beschreibende Daten, der andere heißt „RSS-Feeds“ und enthält einige beschreibende Daten. Behalten Sie das im Hinterkopf und schauen Sie sich dann diesen Code an.
<div class="chunk">
<h4>Track your expenses</h4>
<img src="/images/paper_small.gif" alt="" class="left"/>
<p>Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</p>
</div>
<div class="chunk">
<h4>RSS Feeds</h4>
<img src="/images/rss_big.jpg" alt="" class="left"/>
<p>Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</p>
</div>Semantisch ist das falsch.
Obwohl dieser Code ziemlich sauber ist und problemlos funktioniert, weicht er semantisch von unseren ursprünglichen Gedanken ab. Es gibt zwei Probleme. Erstens trennen die div’s die Blöcke unabhängig voneinander, anstatt sie zusammenzuhalten. Zweitens ist die „Beschreibung“ in ein `<img>`-Element und ein `
`-Element aufgeteilt, anstatt zusammengehalten zu werden.
Die Definitionsliste rettet die Situation.
Okay, okay. Wir haben das Beispiel manipuliert. Dies ist zufällig ein perfektes Szenario für eine Definitionsliste. Definitionslisten bestehen aus drei verschiedenen Tags.
- <dl>: Container
- <dt>: Definitionsterm (wie ein Titel)
- <dd>: Definitionsbeschreibung
Lassen Sie uns nun versuchen, diesen Inhalt mithilfe von Definitionslisten neu zu schreiben. Wir wissen, dass wir das Ganze jetzt in einen Container packen können, um alles zusammenzuhalten. Wir wissen, dass wir die Titel als Definitionsterme festlegen können. Aber was ist mit der Beschreibung? Der beste Weg, semantisch gesehen, wäre, all das in ein einziges Definitionsbeschreibungselement aufzunehmen ... und das können wir! Der einzige Stolperstein ist, dass sich die Bilder zwischen den Blöcken ändern, daher müssen wir den `
<dl>
<dt>Track your expenses</dt>
<dd class="chunk_divide">Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</dd>
<dt>RSS Feeds</dt>
<dd class="chunk_rss">Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</dd>
</dl>Diese Tags bieten Ihnen reichlich Styling-Möglichkeiten in Ihrem CSS.
dt {
font-weight: bold;
}
dd {
background:none no-repeat left top;
padding-left: 50px;
}
dd.catchPhrase1 {
background-image:url('../img/paper_small.gif');
}
dd.catchPhrase2 {
background-image:url('../img/stats.gif');
}Könnte ich das nicht mit einer unsortierten Liste machen?
Sicher, das könnten Sie. Aber Listen können nur Listenelemente enthalten, daher werden der Titel und die Beschreibung nicht so gut semantisch beschrieben wie mit einer Definitionsliste. Zum Teufel, Sie könnten das mit einer Tabelle, mit Divs, mit einer beliebigen Anzahl von HTML-Elementen machen, aber keines davon wird in diesem Fall so viel semantischen Sinn ergeben wie eine Definitionsliste.
Was können sie sonst noch tun?
Ich bin froh, dass Sie fragen, denn dieses Beispiel nutzt nicht alles, was Definitionslisten zu bieten haben. Eine weitere große Stärke ist, dass Sie innerhalb einer Definitionsliste mehrere Begriffe oder mehrere Beschreibungen verwenden können, das ist egal! Denken wir an einige Beispiele.
DT: **Website-Link**
DD: Beschreibung der Website
DT: **Bevorstehender Gig**
DD: Datum
DD: Veranstaltungsort
DD: Eintrittspreis
DT: **Pseudonym #1**
DT: **Pseudonym #2**
DD: Was es bedeutet
DT: **Rezept**
DD: Zutat
DD: Zutat
DD: Anweisungen
Wenn man erst einmal anfängt, wirklich darüber nachzudenken, gibt es so viele praktische Beispiele für Definitionslisten, dass es überraschend ist, dass man sie im Code nicht sehr oft sieht.
Warum sind Definitionslisten nicht weiter verbreitet?
Es ist schwer zu sagen... Ich denke, der größte Grund ist die Suchmaschinenoptimierung (SEO). Leute wissen (oder denken, sie wissen), dass Überschriften (Header-Tags) Inhalten zusätzliches Gewicht und Bedeutung verleihen. Bei richtiger Anwendung ersetzt Ihr Term-Tag die Notwendigkeit einer Überschrift. Ich gehe davon aus, dass die Leute denken, sie würden dadurch weniger Suchmaschinen-Saft aus ihren Inhalten ziehen. Ich werde zu diesem Thema keine Aussage machen, da ich kein SEO-Genie bin, aber mein Bauchgefühl sagt mir, dass Sie für gut markierten Code niemals bestraft werden.
Eine weitere Einschränkung ist, dass Sie keine Block-Level-Elemente innerhalb des `<dt>`-Elements verwenden können. Das ist ähnlich wie bei Überschriftenelementen (z. B. `
`) . (Huttipp Paul O’Brien)
Weiterführende Lektüre.
Definitionslisten – falsch verwendet oder missverstanden?
„Header-Tags verleihen Inhalten zusätzliches Gewicht und Bedeutung“ – könnte man ein Header-Tag innerhalb des DT einfügen? Zum Beispiel Titel oder wäre das ungültig? Ich muss zugeben, ich hatte bis zu meinen Lektüren hier noch nie von Definitionslisten gehört.
@Lazlow: Definitionslisten sind nicht so beliebt wie unsortierte oder sortierte Listen, aber sie existieren.
Sie definieren den Titel Ihrer Definition mit dem DT-Tag, Sie müssen keinen weiteren Header-Tag einfügen.
@Lazlow – Nur um Volkan zu ergänzen: Definitionslisten können keine Blockelemente enthalten, dies schließt Überschriftenelemente aus und deshalb wird das DT-Tag für den Titel verwendet.
Gutes Beispiel…
Sie haben Recht, Definitionslisten werden nicht sehr oft verwendet. Ich erinnere mich, dass ich sie vor einiger Zeit zum ersten Mal verwendet habe und wie einfach sie zu benutzen und zu gestalten waren.
Danke, dass Sie der Definitionsliste etwas Liebe schenken! Ich sehe sie nicht oft verwendet und frage mich, ob es daran liegt, dass die Leute sie nicht mögen oder ob sie einfach nichts davon wissen. Je mehr Beispiele für semantische Anwendungen dafür, desto besser.
@Matt – Ich glaube, die Leute benutzen sie nicht, weil sie sie nicht kennen und nicht wissen, wie sie am besten eingesetzt wird. Unsortierte Listen werden häufiger verwendet, da sie für Menüs genutzt werden.
Übrigens wird Ihr Submit-Button in meinem IE7 nicht angezeigt.
Übrigens, Chris, dein neuer Footer ist super :)
„Eine weitere Einschränkung ist, dass Sie keine Block-Level-Elemente in Definitionslisten verwenden können.“
Nur zur Klarstellung – Sie können Blockelemente nur in DT, nicht in DD, verwenden.
Hallo, vor einiger Zeit habe ich beim Benutzen von Definitionslisten irgendwo gelesen, dass es nicht angemessen sei, einer DT mehr als eine DD zu geben.
Sie empfahlen stattdessen eine UL wie folgt zu verwenden:
DL
DT
DD
UL
LI
LI
LI
UL
DD
DL
Was denkst du darüber?
Habe den Link gefunden: http://tinyurl.com/9sd68
Gute Lektüre!
Danke Leute.
Toller Beitrag. Ich benutze Definitionslisten ständig, weil sie die einzige Möglichkeit sind, eine Name-Wert-Paar-Beziehung in Markup auszudrücken. Ich habe sie sogar verwendet, um ein einziges Elementpaar zu markieren, wie z. B. ein Foto und seine Bildunterschrift, obwohl das vielleicht ein bisschen übertrieben ist. Ich glaube, das ist auch ein vorgeschlagener Microformat.
Sehr guter Beitrag, ich bin über „StumbleUpon“ auf diesen Beitrag gestoßen und liebe die Tatsache, dass Sie den DL Beachtung schenken.
Außerdem, wenn ich hinzufügen darf, musste ich letzte Woche einem Kunden die semantischen Gründe hinter der DL erklären. Sie wollten, dass ich es so einrichte:
<h1>Titel</h1>
<p>Text</p>
für die Suchmaschine. Nun, das kann funktionieren, aber es sollte nicht im Hauptinhalt oder im Header stehen. Nein, das sollte in der rechten Spalte stehen, es war ein Vierspalten-Design, und wirklich keine aufmerksamkeitsstarke Sektion. Also, zusätzlich zur Erklärung, warum die DL semantisch korrekt war, musste ich auch erklären, warum die Verwendung einer H1 an einem anderen Ort als im Header semantisch nicht richtig war. Was ich schließlich tat, war, eine Beispielseite mit beidem zu kodieren und die Stile zu deaktivieren; das öffnete ihm ein wenig die Augen.
Jedenfalls ein sehr guter Beitrag, entschuldigen Sie den langen Kommentar. Ich werde Ihre Website bookmarken.
@Chocopunk – Ich würde persönlich nicht empfehlen, eine UL, LI usw. in einer Definitionsliste zu verwenden, das erscheint mir zu unübersichtlich und unsemantisch.
Ich habe noch nie Definitionslisten verwendet, weil mir die Art und Weise, wie die separaten Definitionen nicht gruppiert sind, nicht gefällt. Stattdessen werden sie einfach innerhalb der `
` zusammengefasst. Wenn die Definitionsliste eine Reihe von Containerelementen (z. B. ``, ähnlich wie die `- ` einer Liste) enthalten würde, die separate `
- `- und `
- `-Paare gruppieren, wäre das für mich strukturierter und sinnvoller.
Aber ich schätze, das ist nicht wirklich so wichtig..! Weitere Untersuchungen sind erforderlich, denke ich!
Ich habe bisher noch nie Definitionslisten verwendet, aber nach Ihrem Artikel werde ich versuchen, sie öfter zu verwenden.
Danke für den Hinweis!
Ihre semantischen Argumente sind etwas daneben.
Der erste Fall ist perfekt semantisch. Eine Überschrift ist dazu gedacht, einen Inhaltsabschnitt zu leiten. Sie sagten, er sei falsch, weil sie nicht gruppiert seien, aber sie sind durch ihre relative Lage zueinander gruppiert, und wenn das nicht ausreicht, sind sie durch ihr Elternelement gruppiert (zum Beispiel könnten Sie ein Div über dieser Gruppe definieren). Obwohl nicht ideal, ist ein Listenelement eine bessere Lösung, aber es ist nie weniger eine semantische Lösung.
Auch interessant ist die Tatsache, dass Sie eine DL-Liste nicht auf ein DT oder DD pro Element beschränken müssen – es sind keine Schlüssel-Wert-Paare.
Sie könnten zum Beispiel ein
DT (Abschlusstitel)
DD (Bild)
DD (Absatz)
Gute Lektüre. Ich habe noch nie DL, DT oder DD verwendet.
Definitionslisten rocken :)
Gute Lektüre, ich werde diese Methode beim nächsten Entwickeln ausprobieren.
Gute Arbeit, Chris
Ein Twitter-Freund schickte mir diesen Beitrag, nachdem ich angefangen hatte, Definitionslisten zu recherchieren. Offensichtlich sollte ich sie für mehr meiner Beiträge verwenden, da ich auf meinem Blog oft die „erweiterte“ Listenform mache.
Danke für den exzellenten Überblick! Ich werde definitiv damit herumspielen müssen.
Definitionslisten könnten häufiger verwendet werden, wenn DL, DT und DD-Buttons in CMS-Editoren wie TinyMCE enthalten wären. Die meisten Marcoms, mit denen ich gearbeitet habe, kennen sich wenig mit Code aus, daher ist es ausgeschlossen, in den Textteil des Editors zu gehen, um eine DL zu erstellen und zu bearbeiten. Selbst mit diesen Buttons müssten sie mindestens zwei Elemente auswählen, auf den DL-Button klicken, die Auswahl aufheben, das erste Element auswählen und auf DT klicken und das zweite Element auswählen und auf DD klicken. Das wird nicht passieren.
Fazit: Wenn ich Inhalte für einen Kunden mit einer Definitionsliste organisiere, ist die Wahrscheinlichkeit groß, dass sie nicht ordnungsgemäß gepflegt wird.
Davon abgesehen, finde ich sie (das ist ein Kursiv-Ich) großartig.
Hallo Chris. Ich freue mich, dass Sie Ihr Wissen kostenlos zur Verfügung stellen. Ich habe im Laufe der Jahre jeden Fehler gemacht. Jetzt ist Ihre Website meine erste Anlaufstelle, wenn ich etwas Neues versuche – oder dasselbe alte Zeug – besser mache. Danke.
Ein Kollege benutzte DL’s und es war meine Aufgabe, ein DT/DD-Paar mit JS bedingt auszublenden, basierend auf dem Wert eines Eingabefeldes. Ich stellte fest, dass das einfache Setzen von `display:none` für diese nicht funktionierte (auch nicht mit `!important`), und die einzige Umgehung, die ich fand, ist ziemlich übertrieben: http://stackoverflow.com/questions/6988945/hide-show-dd-elements-in-a-definition-list
Das ist also ein Nachteil der Verwendung von DL’s, und offiziell bleibe ich bei bewährten Divs und ULs. Es sei denn, hat jemand eine elegante Methode, Definition Listenpaare dynamisch auszublenden?
KORREKTUR! Ignorieren Sie alles, was ich oben erwähnt habe… Mein Problem lag beim JS, nicht beim DL… Sieht aus, als wären DL’s doch etwas, das man in Betracht ziehen könnte.
Ist DL ein HTML5-Tag? Wenn ja, ist es mit früheren HTML-Versionen kompatibel?