Was ist das HTML

-Element?

Das HTML-Element <dt> steht für Definition Term (Definitionsterm) und ist ein Teil des HTML5-Tags <dl> (Definition List, Definitionsliste). Es wird verwendet, um den Begriff oder die Phrase zu definieren, auf den sich der zugehörige <dd>-Tag (Definition Description, Definitionsbeschreibung) bezieht.

Funktionen des `<dt>`-Elements

Definitionsterm festlegen: Das <dt>-Element kennzeichnet den Begriff oder das Wort, das definiert wird.
Barrierefreiheit verbessern: Semantic Web-Technologien, wie beispielsweise Screenreader, können <dt> und <dd> verwenden, um hierarchische Definitionen zu extrahieren.

Wie wird das

-Element verwendet?

Das <dt>-Element wird verwendet, um einen Definitionsbegriff darzustellen, d. h. einen Begriff, der definiert werden soll. Es ist ein Teil des <dl>-Elements, das eine Liste von Begriffen und Definitionen darstellt.

Erstellung eines Definitionsbegriffs mit `<dt>`

Um einen Definitionsbegriff zu erstellen, verwendest du das <dt>-Element. Innerhalb des Elements gibst du den Begriff an, den du definieren möchtest. Beispiel:

<dt>HTML</dt>

Verbindung eines Definitionsbegriffs mit seiner Definition

Um einen Definitionsbegriff mit seiner Definition zu verbinden, verwendest du das <dd>-Element. Das <dd>-Element enthält die Definition des Begriffs. Es folgt dem <dt>-Element in der <dl>-Liste. Beispiel:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
</dl>

Eigenschaften des `<dt>`-Elements

Globale Attribute: Das <dt>-Element unterstützt alle globalen Attribute, die für HTML-Elemente definiert sind.

Zusätzliche Attribute: Das <dt>-Element unterstützt keine zusätzlichen Attribute, die speziell für dieses Element definiert sind.

Verwendung von `title`-Attributen mit `<dt>`

Du kannst das title-Attribut verwenden, um einen Kurztipp oder eine zusätzliche Information zum Definitionsbegriff bereitzustellen. Beispiel:

<dt title="Standard-Markup-Sprache für das World Wide Web">HTML</dt>

Positionierung und Styling von Definitionsbegriffen

Definitionsbegriffe werden standardmäßig blockweise dargestellt. Du kannst CSS verwenden, um sie inline oder anderweitig zu formatieren. Beispiel:

dl dt {
  font-weight: bold;
  margin-bottom: 10px;
}

Definitionen in HTML mit

und

erstellen

Um Definitionen in HTML zu erstellen, verwendest du das

-Element für den Definitionsterm und das

-Element für die Definition. Die Verwendung ist einfach:

-Element: Den Definitionsterm festlegen

Definiere den zu definierenden Begriff im
-Element:

<dt>HTML</dt>

-Element: Die Definition hinzufügen

Füge die Definition des Begriffs im
-Element hinzu:

<dd>Hypertext Markup Language</dd>

Zuordnung von Definitionsterm und Definition

Das

-Element wird automatisch mit dem nächstgelegenen

-Element verknüpft, um eine Definition zu bilden. So kannst du mehrere Definitionen für einen Begriff erstellen:

<dt>Webentwicklung</dt>
<dd>Erstellen und Pflegen von Websites</dd>
<dd>Umfasst Front-End- und Back-End-Technologien</dd>

Verschachtelung von Definitionen

Du kannst

– und

-Elemente verschachteln, um verschachtelte Definitionen zu erstellen:

<dt>HTML</dt>
<dd>Hypertext Markup Language
    <dt>Element</dt>
    <dd>Ein Tag in HTML, der eine bestimmte Funktion darstellt</dd>
</dd>

Positionierung und Styling von Definitionen

Wenn du die Positionierung und das Styling deiner Definitionen anpassen möchtest, stehen dir verschiedene Optionen zur Verfügung.

Positionierung

Float: Du kannst die Definitionen mithilfe der CSS-Eigenschaft float neben anderen Elementen positionieren. Dies kann nützlich sein, um beispielsweise Definitionen neben einem zugehörigen Bild auszurichten.
Positionierung: Du kannst auch die CSS-Eigenschaft position verwenden, um die Definitionen präzise auf der Seite zu positionieren. Dies ermöglicht es dir, die Definitionen an einer bestimmten Stelle auf der Seite zu platzieren oder sie relativ zu anderen Elementen zu positionieren.

Styling

Textformatierung: Du kannst die Textformatierung der Definitionen mithilfe von CSS-Eigenschaften wie font-family, font-size und color anpassen.
Abstand: Verwende CSS-Eigenschaften wie padding und margin, um den Abstand zwischen den Definitionen und anderen Elementen anzupassen.
Hintergrund: Du kannst einen Hintergrund für die Definitionen mithilfe der CSS-Eigenschaft background-color hinzufügen.
Grenzen: Füge Grenzen zu den Definitionen hinzu, indem du die CSS-Eigenschaft border verwendest.
CSS-Frameworks: Du kannst auch CSS-Frameworks wie Bootstrap oder Materialize verwenden, um vordefinierte Stile für Definitionen zu erhalten. Diese Frameworks bieten eine Vielzahl von Optionen zum Anpassen des Erscheinungsbilds deiner Definitionen.

Barrierefreiheit und Semantik von

Rolle des HTML

-Elements

Das

-Element spielt eine entscheidende Rolle bei der Barrierefreiheit und Semantik von Webdokumenten. Es teilt dem Browser mit, dass der folgende Inhalt ein Begriff oder Begriff ist, der definiert werden soll.

Semantische Bedeutung

Für Menschen mit Behinderungen, wie z. B. Sehbehinderungen, ist es wichtig, den Zweck von HTML-Elementen zu verstehen. Das

-Element kennzeichnet Text als Definitionstermin und ermöglicht es Screenreadern, den Inhalt entsprechend zu interpretieren.

Screenreader-Unterstützung

Screenreader erkennen das

-Element und kündigen an, dass es sich um einen Definitionstermin handelt. Dies hilft Menschen mit Sehbehinderungen, den Text kontextbezogen zu verstehen, selbst wenn sie ihn nicht sehen können.

ARIA-Rollen

Das

-Element kann mit ARIA-Rollen (Accessible Rich Internet Applications) ausgestattet werden, um seine semantische Bedeutung noch deutlicher zu machen. Die Rolle "term" kann hinzugefügt werden, um explizit anzugeben, dass der Inhalt ein Definitionstermin ist.

Beispiel

<dl>
  <dt id="definition-term">Definitionstermin</dt>
  <dd id="definition-description">Definition</dd>
</dl>

In diesem Beispiel wird dem Bildschirmleser mitgeteilt, dass die ID "definition-term" den Begriff und die ID "definition-description" die Definition definiert.

Unterschiede zwischen `<dt>` und `<dfn>`

Die HTML-Elemente <dt> und <dfn> haben zwar eine ähnliche Aufgabe, Definitionen zu kennzeichnen, unterscheiden sich jedoch in ihrem Zweck und ihrer Verwendung.

Definition und Zweck

<dt> (Definition Term) definiert einen Begriff in einer Definitionenliste. Es stellt den Begriff dar, für den eine Definition bereitgestellt wird.

<dfn> (Definition) kennzeichnet eine Definition, die in den laufenden Text integriert ist. Es wird verwendet, um schwierige oder ungewöhnliche Begriffe für den Leser zu erläutern.

Semantik und Barrierefreiheit

<dt> ist ein semantisches Element, das von Screenreadern und anderen Hilfstechnologien erkannt wird, um die Struktur und Bedeutung des Inhalts zu vermitteln.
<dfn> ist ein reines Präsentations-Element, das vom Browser nur zur visuellen Hervorhebung der Definition verwendet wird, aber keine semantische Bedeutung hat.

Verwendung

<dt> wird in Verbindung mit dem <dd> (Definition Description)-Element verwendet, um eine Definitionenliste zu erstellen.
<dfn> kann im gesamten Dokument außerhalb von Definitionenlisten verwendet werden.

Beispiele

Definitionenliste mit <dt> und <dd>:

<dl>
  <dt>HTML</dt>
  <dd>Eine Auszeichnungssprache zur Strukturierung von Webinhalten.</dd>
  <dt>CSS</dt>
  <dd>Eine Sprache zur Stilisierung von HTML-Dokumenten.</dd>
</dl>

Eine Definition in den laufenden Text einbetten mit <dfn>:

Dieser Begriff wird als `<dfn>foobar</dfn>` bezeichnet, was eine Variable in der Programmierung darstellt.

Fazit

Verwende <dt> für Definitionen in Definitionenlisten, um die Semantik und Barrierefreiheit des Inhalts zu verbessern. Verwende <dfn> für Definitionen, die direkt in den laufenden Text eingebettet sind und auf die visuellen Stilisierung angewiesen sind. Indem du diese Elemente richtig verwendest, kannst du deinem Webinhalt Struktur und Kontext verleihen und die Benutzerfreundlichkeit für alle Nutzer verbessern.

Best Practices für die Verwendung von

Um das

-Element effektiv einzusetzen, solltest du dich an folgende Best Practices halten:

Verwende

immer zusammen mit

Definitionsterme sollten immer in Verbindung mit Definitionen verwendet werden. Verwende daher immer sowohl das

– als auch das

-Element, um eine vollständige Definition zu erstellen.

Stelle sicher, dass der Definitionsterm eindeutig ist

Der Definitionsterm sollte klar und prägnant sein und die Definition eindeutig identifizieren. Vermeide es, vage oder mehrdeutige Begriffe zu verwenden.

Verwende Großbuchstaben sparsam

Verwende Großbuchstaben nur, wenn es für die Bedeutung des Definitionstermins notwendig ist. Vermeide es, alle Buchstaben des Begriffs in Großbuchstaben zu schreiben, da dies die Lesbarkeit beeinträchtigt.

Verwende keine

-Elemente für Überschriften

Verwende

-Elemente nicht als Überschriften oder Titel. Verwende stattdessen geeignete Überschriftenelemente wie

,

und

.

Verwende -Elemente für formale Definitionen

Verwende

-Elemente für allgemeine Definitionen. Wenn du eine formale oder technische Definition angeben möchtest, verwende stattdessen das -Element.

Verwende aria-describedby, um die Assoziation zu

anzugeben

Verwende das Attribut aria-describedby, um die Assoziation zwischen dem Definitionstermin und der Definition anzugeben. Dies verbessert die Barrierefreiheit für Nutzer von Bildschirmlesegeräten.

Beispiele für die Verwendung von

Das

-Element ist ein vielseitiges Tool, das in verschiedenen Szenarien eingesetzt werden kann:

Glossare und Wörterbücher

Erstelle ein interaktives Glossar deiner Fachbegriffe oder ein Wörterbuch mit Definitionen, indem du das

-Element für die Begriffe und das

-Element für die Definitionen verwendest. Zum Beispiel:

<dl>
  <dt>HTML</dt>
  <dd>Eine Auszeichnungssprache zur Strukturierung von Webseiten.</dd>
  <dt>CSS</dt>
  <dd>Eine Stylesheet-Sprache zur Gestaltung von Webseiten.</dd>
</dl>

Häufig gestellte Fragen (FAQs)

Organisiere eine FAQ-Seite übersichtlich, indem du die Fragen in

-Elemente und die Antworten in

-Elemente einfügst. Dies erleichtert das Auffinden der benötigten Informationen:

<dl>
  <dt>Wie kann ich mein Passwort zurücksetzen?</dt>
  <dd>Besuche <a href="https://www.beispielseite.com/passwort-zurucksetzen">diese Seite</a> und gib deine E-Mail-Adresse ein.</dd>
  <dt>Wie viel kostet ein Premium-Abonnement?</dt>
  <dd>Unser Premium-Abonnement kostet 9,99 € pro Monat.</dd>
</dl>

Listen mit Begriffen und Erläuterungen

Präsentiere eine Liste von Begriffen und ihren Erläuterungen in einem übersichtlichen Format, indem du

-Elemente für die Begriffe und

-Elemente für die Erläuterungen verwendest:

<dl>
  <dt>Suchmaschinenoptimierung (SEO)</dt>
  <dd>Die Praxis, die Sichtbarkeit einer Website in Suchmaschinenergebnissen zu verbessern.</dd>
  <dt>Konversionsrate</dt>
  <dd>Der Prozentsatz der Besucher einer Website, die eine gewünschte Aktion ausführen, wie z. B. einen Kauf oder eine Anmeldung.</dd>
</dl>

Inhaltliches Markup in HTML5

In HTML5 kann das

-Element verwendet werden, um eine Vielzahl von Inhaltstypen semantisch zu markieren, darunter:

Datum und Uhrzeit: Elemente innerhalb von

zeigen Datum und Uhrzeit an.
Definitionen: Elemente innerhalb von

definieren Begriffe.
Glossareinträge: Elemente mit der Klasse "glossentry" innerhalb von

markieren Glossareinträge.

HTML : Das Definition Term-Element verstehen

Was ist das HTML -Element?

Funktionen des <dt>-Elements

Wie wird das -Element verwendet?

Erstellung eines Definitionsbegriffs mit <dt>