HTML/Textstrukturierung/dl

Aus SELFHTML-Wiki
< HTML | Textstrukturierung(Weitergeleitet von Dl)
Wechseln zu: Navigation, Suche

Definitionslisten, seit HTML5 Beschreibungslisten, werden mit dl-Elementen aufgebaut. dl steht dabei für definition- bzw. description list.

Solche Listen sind beispielsweise für Glossare 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.

  • Eine Definitions- bzw. Beschreibungsliste wird mit <dl> eingeleitet und mit </dl> beendet.
  • Der zu erläuternde Ausdruck steht zwischen <dt>…</dt> (description (list) term).
  • <dd>…</dd> (description (list) description) umschließt die Erläuterung.

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.

  • IE
  • Opera
  • Firefox
  • Safari
  • Chrome
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Definitions- bzw. Beschreibungslisten definieren</title> </head> <body> <h1>Gängige Abkürzungen</h1> <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> </body> </html>

[Bearbeiten] Listen mit CSS formatieren

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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML