HTML/Textstrukturierung/dl

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Definitionslisten, seit HTML5 Beschreibungslisten, werden mit dl-Elementen (definition- bzw. description list) aufgebaut. Solche Listen sind beispielsweise für Glossare oder Adressfelder gedacht. Ein Glossar besteht meist aus einer Liste von Einträgen, die wiederum aus mindestens einem zu erklärenden Sachverhalt nebst mindestens einer Erklärung besteht.

  • IE
  • Opera
  • Firefox
  • Safari
  • Chrome
  • HTML 2.0
  • XHTML 1.0
  • HTML5
  • <dl> leitet eine Definitions- bzw. Beschreibungsliste ein
    • <dt>…</dt> (description (list) term) enthält den zu erläuternden Ausdruck
    • <dd>…</dd> (description (list) description) umschließt die Erläuterung.
  • </dl> beendet die Definitionsliste

Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen. Zum Beispiel könnten Begriffe mit einer Erklärung abgehandelt werden oder mehrere Bedeutungen für einen Begriff existieren.

Das Verschachteln von Definitionslisten ist ebenfalls möglich. Dadurch können Sie baumartige Strukturen im Text abbilden. „Innere“ Listen müssen dabei innerhalb des dd-Elements notiert werden.

Beispiel ansehen …
<dl> <dt>allg.</dt> <dd>allgemein</dd> <dt>bez.</dt> <dd>bezüglich</dd> <dd>bezahlt</dd> <dt>u. a.</dt> <dd>unter anderem, unter anderen</dd> <dd>und andere, und anderes</dd> <dt>zzgl.</dt> <dd>zuzüglich</dd> </dl>

Listen mit CSS formatieren[Bearbeiten]

Wie eine Liste genau dargestellt wird, können Sie mit HTML nicht beeinflussen. Die Browser benutzen Default-Formatierungen, um Listen darzustellen. Mit Stylesheets (CSS) können Sie ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren. Maßgeblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften zur:

und auch die allgemeinen Eigenschaften:

  • HTML 2.0
  • XHTML 1.0
  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype hmtl> <html> <head> <meta charset="utf-8"> <title>Listen mit CSS formatieren</title> <style> ul { list-style-type: disc; color: red; font-weight: bold; } ol { list-style-type: upper-roman; font-weight: bold; } ol > li:first-child { color: blue; } ol > li:nth-child(2) { color: maroon; } ol > li:nth-child(3) { color: olive; } dl { font-size: 0.7em ; font-family: Verdana,Arial,sans-serif; } </style> </head> <body> <h1>Listen mit CSS formatieren</h1> <h2>Aufzählungsliste</h2> <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> <h2>Nummerierte Liste</h2> <ol> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li> </ol> <h2>Definitions- bzw. Beschreibungsliste</h2> <dl> <dt>AA</dt> <dd>Auto Answer (Modem)</dd> <dt>AAE</dt> <dd>Allgemeine Anschalte-Erlaubnis</dd> <dt>AARP</dt> <dd>Appletalk Address Resolution Protocol</dd> </dl> </body> </html>
Im Beispiel wird für eine Aufzählungsliste (<ul>…</ul>) bestimmt, dass sie ein Disk-Symbol als Bullet-Zeichen erhält, fett und in roter Farbe erscheint. Für eine nummerierte Liste (<ol>…</ol>) wird bestimmt, dass sie in römischen großen Ziffern zählt, und dass ihre Einträge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen Farben dargestellt. Für eine Definitionsliste (<dl>…</dl>) wird eine kleinere Schriftgröße als normal und eine Schriftart festgelegt.

Siehe auch[Bearbeiten]

  • Referenz: dl
  • Referenz: dt
  • Referenz: dd