HTML dt-Tag - Learn HTML

Das <dt>-Tag (kurz für description term, früher definition term) kennzeichnet den Begriff, der innerhalb einer Beschreibungsliste definiert wird. Es ist eines der drei Tags, aus denen eine solche Liste aufgebaut ist, zusammen mit <dl> und <dd>:

<dl> umschließt die gesamte Liste (die Beschreibungsliste).
<dt> benennt einen Begriff, zum Beispiel ein Wort in einem Glossar oder ein Metadaten-Label.
<dd> liefert die Beschreibung oder den Wert für den vorangehenden Begriff.

Verwenden Sie eine Beschreibungsliste, wenn Ihr Inhalt von Natur aus eine Sammlung von Name/Wert-Paaren ist: ein Glossar, FAQ-Fragen und Antworten, Schlüssel/Wert-Metadaten oder Begriffsdefinitionen. Für geordnete oder mit Aufzählungszeichen versehene Inhalte verwenden Sie stattdessen einen anderen Listentyp — siehe die HTML-Listen-Übersicht.

Strukturelle Regeln

Das <dt>-Element hat zwei Anforderungen, die Sie für valides und barrierefreies Markup befolgen müssen:

<dt> muss ein direktes Kindelement von <dl> sein. Es kann nicht allein außerhalb einer Beschreibungsliste erscheinen (oder in modernem HTML innerhalb eines einzelnen umschließenden <div> direkt innerhalb des <dl>).
<dt> muss vor seinem <dd> stehen. Jede Gruppe beginnt mit einem oder mehreren Begriffen (<dt>), gefolgt von einer oder mehreren Beschreibungen (<dd>). Ein <dd> beschreibt die vorangehenden <dt>-Elemente.

Das <dt>-Tag wird in Paaren verwendet: Der Inhalt steht zwischen dem öffnenden <dt>- und dem schließenden </dt>-Tag.

Beispiel des HTML-`<dt>`-Tags:

HTML <dt>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Probier es selbst »

Ergebnis

Mehrere Begriffe und mehrere Beschreibungen

Eine Beschreibungsgruppe ist nicht auf einen Begriff und eine Beschreibung beschränkt. Sie können mehrere <dt>- und <dd>-Elemente in derselben Gruppe kombinieren.

Mehrere <dt> für ein <dd> — verwenden Sie dies, wenn mehrere Begriffe eine gemeinsame Definition haben, zum Beispiel Synonyme oder alternative Schreibweisen:

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>

Mehrere <dd> für ein <dt> — verwenden Sie dies, wenn ein einzelner Begriff mehr als eine Bedeutung oder einen Wert hat:

<dl>
  <dt>Coffee</dt>
  <dd>A hot beverage brewed from roasted coffee beans.</dd>
  <dd>The seeds of the coffee plant.</dd>
</dl>

Ein realistisches Beispiel: Produkt-Metadaten

Beschreibungslisten eignen sich hervorragend für Schlüssel/Wert-Metadaten. Hier ist jedes <dt> ein Label und jedes <dd> sein Wert:

<dl>
  <dt>Product name</dt>
  <dd>Mechanical Keyboard K3</dd>

  <dt>Manufacturer</dt>
  <dd>Keychron</dd>

  <dt>Connectivity</dt>
  <dd>Bluetooth 5.1</dd>
  <dd>USB-C (wired)</dd>

  <dt>Price</dt>
  <dd>$79.99</dd>
</dl>

Beachten Sie, dass der Begriff Connectivity zwei <dd>-Werte hat — eine übersichtliche Möglichkeit, mehrere Werte für ein Label aufzulisten.

Standard-Darstellung

Browser setzen <dt> standardmäßig nicht in einer besonderen Weise um: Der Begriff wird in normalem (nicht fettem) Schriftgewicht dargestellt, während jedes nachfolgende <dd> darunter eingerückt wird. Die visuelle Hierarchie, die man von einem Glossar üblicherweise erwartet — fettgedruckte Begriffe — kommt aus CSS, nicht aus den Browser-Standards.

Attribute

Das <dt>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.

Wie man ein HTML-<dt>-Tag gestaltet

Der folgende Ausschnitt überschreibt die Standard-Darstellung: Er macht Begriffe fett und gibt ihnen eine markante Farbe, sodass sie sich von ihren Beschreibungen abheben.

dt {
  font-weight: bold;
  color: #2c3e50;
}

Barrierefreiheit

Beschreibungslisten tragen eine Bedeutung über ihr Erscheinungsbild hinaus. Screenreader erkennen die <dl>/<dt>/<dd>-Struktur und kündigen jedes <dt> als Begriff zusammen mit der zugehörigen <dd>-Beschreibung an, sodass Nutzer den Begriff und seinen Wert als zusammengehöriges Paar hören. Wenn man das gleiche Erscheinungsbild mit einfachen Absätzen und CSS nachahmt, geht diese Beziehung verloren. Verwenden Sie eine echte Beschreibungsliste, wenn der Inhalt wirklich eine Sammlung von Begriff/Beschreibungs-Paaren ist.

Übungen

Übung

Was können Sie über das <dt> HTML-Tag sagen?

Das <dt>-Tag wird verwendet, um den Begriff in einer Beschreibungsliste zu definieren.Das <dt>-Tag kann allein ohne die <dl>- oder <dd>-Tags verwendet werden.Die mit <dt>-Tags gekennzeichneten Begriffe können mit CSS gestaltet werden.Das <dt>-Tag ist ein selbstschließendes Tag.Das <dt>-Tag unterstützt alle globalen Attribute in HTML.