Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Definitionsliste <dl>, <dt> u. <dd>

Definitionsliste über <dl>, <dt> und <dd>

Auflistungen von Definitionen treten meistens in Glossaren auf – sprich Begriffe und deren Erklärungen. Für Definitionslisten werden nun 3 verschiedene HTML-TAGs benötigt.

<dl> Englisch für „definition list“ – Definitionsliste

<dt> Englisch „definition term“ – Definitionsbegriff

<dd> Englisch „definition description“ – Definitionsbeschreibung

Der HTML-Befehl, der die komplette Auflistung umschließt, ist der HTML-TAG <dl>.

Beispielaufbau:

<dl>
  <dt>Definitionsbegriff 1</dt>
  <dd>Definitionsbeschreibung 1</dd>

  <dt>Definitionsbegriff 2</dt>
  <dd>Definitionsbeschreibung 2</dd>
</dl>

Design der Definitionsliste

Die Definitionsbeschreibung <dd> wird standardmäßig ein wenig eingerückt angezeigt. Dies sieht oft nicht besonders schön aus. Aber zum jetzigen Zeitpunkt ist das nicht wichtig. Das Design der Definitionslisten können wir später über CSS nach Belieben gestalten. Die Weite der Einrückung oder die Tatsache, dass die Definitionsbeschreibung <dd> links neben dem Definitionsbegriff <dt> steht und der Definitionsbegriff z. B. orange und fett hervorgehoben ist, wird in CSS definiert. Alles, was Design ist, wird im modernen Erstellen von Websites von CSS übernommen.

Aufgabe Definitionsliste

Erstellen Sie nun ein kleines Glossar über die Begriffe „Hund“, „Katze“ und „Maus“. Die Erklärungen müssen weder biologisch korrekt noch sonderlich ausführlich sein. Wichtig ist primär, dass der erstellte HTML-Code valide ist.

Lösung Übung

Aufgabenlösung Definitionslisten

Kleines nicht sehr ernst gemeintes Glossar über die Begriffe „Hund“, „Katze“ und „Maus“ – Hauptsache der HTML-Aufbau ist richtig!

<dl>
  <dt>Hund</dt>
  <dd>macht wau und mag Katzen</dd>

  <dt>Katze</dt>
  <dd>macht miau und mag Maus</dd>

  <dt>Maus</dt>
  <dd>mag keine Katzen</dd>
</dl>

Und im Browser kommt es dann wie folgt heraus:

Hund
     macht wau und mag Katzen
Katze
     macht miau und mag Maus
Maus
     mag keine Katzen

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details