HTML <dt>: Das Definition Term-Element verstehen
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: 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
<dt>Webentwicklung</dt>
<dd>Erstellen und Pflegen von Websites</dd>
<dd>Umfasst Front-End- und Back-End-Technologien</dd>
Verschachtelung von Definitionen
Du kannst
<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
undcolor
anpassen. -
Abstand: Verwende CSS-Eigenschaften wie
padding
undmargin
, 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
Semantische Bedeutung
Für Menschen mit Behinderungen, wie z. B. Sehbehinderungen, ist es wichtig, den Zweck von HTML-Elementen zu verstehen. Das
Screenreader-Unterstützung
Screenreader erkennen das
ARIA-Rollen
Das
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
Verwende immer zusammen mit
Definitionsterme sollten immer in Verbindung mit Definitionen verwendet werden. Verwende daher immer sowohl das
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
, und .
Verwende -Elemente für formale Definitionen
.
Verwende -Elemente für formale Definitionen
Verwende
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
Glossare und Wörterbücher
Erstelle ein interaktives Glossar deiner Fachbegriffe oder ein Wörterbuch mit Definitionen, indem du das
<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
<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
<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
- Datum und Uhrzeit:
-
Definitionen: Elemente innerhalb von
- definieren Begriffe.
-
Glossareinträge: Elemente mit der Klasse "glossentry" innerhalb von
- markieren Glossareinträge.
Neue Posts
World of Warcraft auf Linux spielen: Eine guide für Abenteurer
Einführung in World of Warcraft
Node.js NVM: Antworten auf die häufigsten Fragen
Entwicklung
Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen
Marketingstrategien
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten
SEO-Optimierung
Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit
Online-Marketing
HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web
Einführung in HTTP-Statuscodes
Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg
SEO-Optimierung
Beschleunigen Sie die Dateneingabe mit HTML Datalist
Webentwicklung
HTML in PUG konvertieren: Einfach und schnell gemacht
Webentwicklung
Beliebte Posts
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen
Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal
Open Source