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.

<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>