HTML - Definitionslisten
Eine Definitionsliste erstellen
Um eine Definitionsliste in HTML zu erstellen, verwenden Sie das <dl>-Tag, um die Liste zu definieren. Innerhalb des <dl>-Tags nutzen Sie das <dt>-Tag, um einen Begriff anzugeben, und das <dd>-Tag, um die Definition oder Beschreibung dieses Begriffs bereitzustellen.
Beispiel: Grundstruktur einer Definitionsliste
<dl>
<dt>Begriff 1</dt>
<dd>Definition oder Beschreibung von Begriff 1</dd>
<dt>Begriff 2</dt>
<dd>Definition oder Beschreibung von Begriff 2</dd>
...
</dl>Das <dt>-Tag stellt den zu definierenden Begriff dar, während das <dd>-Tag die Definition oder Beschreibung dieses Begriffs repräsentiert. Sie können mehrere <dt>- und <dd>-Paare innerhalb einer einzelnen <dl>-Liste haben.
Die <dt>- und <dd>-Tags müssen direkte Kinder des <dl>-Tags sein. Sie können sie nicht innerhalb anderer Elemente in der Definitionsliste verschachteln.
Der Inhalt innerhalb der <dt>- und <dd>-Tags kann jedes gültige HTML sein, wie Text, Bilder oder andere Inline-Elemente. Achten Sie jedoch darauf, den Inhalt knapp und relevant für den zu definierenden Begriff zu halten.
Durch die Verwendung der <dl>, <dt> und <dd>-Tags können Sie strukturierte und aussagekräftige Definitionslisten in Ihren HTML-Dokumenten erstellen. Dies hilft, Informationen klar und verständlich für Benutzer und Suchmaschinen zu organisieren und zu präsentieren.
Beispiel einer Definitionsliste
Beispiel einer Definitionsliste
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language, die Standardauszeichnungssprache zur Erstellung von Webseiten.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, eine Stylesheet-Sprache zur Beschreibung der Darstellung eines in HTML geschriebenen Dokuments.</dd>
<dt>JavaScript</dt>
<dd>Eine hochentwickelte, dynamische Programmiersprache, die häufig zur Erstellung interaktiver Webseiten verwendet wird.</dd>
<dt>Front-end-Entwicklung</dt>
<dd>Die Praxis der Entwicklung der Benutzeroberfläche und clientseitigen Funktionalität einer Website oder Anwendung.</dd>
<dd>Sie umfasst die Verwendung von HTML, CSS und JavaScript zur Erstellung der visuellen und interaktiven Elemente einer Webseite.</dd>
</dl>Wir haben eine Definitionsliste (<dl>), die Begriffe (<dt>) und ihre Definitionen (<dd>) enthält.
Der erste Begriff ist "HTML", und seine Definition wird im folgenden <dd>-Tag angegeben. Die Begriffe "CSS", "JavaScript" und "Front-end-Entwicklung" werden in ihren <dd>-Tags definiert.
Für den Begriff "Front-end-Entwicklung" gibt es zwei <dd>-Tags. Dies zeigt, dass Sie mehrere Definitionen oder Beschreibungen für einen einzelnen Begriff haben können. Jeder <dd>-Tag stellt eine separate Definition oder weitere Informationen zum Begriff dar.
Durch diese Strukturierung der Definitionsliste können Sie eine klare und übersichtliche Liste von Begriffen und ihren Definitionen präsentieren. Die Einrückung und Zeilenumbrüche zwischen den Tags sind optional, können aber die Lesbarkeit des Codes verbessern.
Der Inhalt innerhalb der <dt>- und <dd>-Tags kann jedes gültige HTML sein, sodass Sie bei Bedarf Links, Bilder oder andere Inline-Elemente einfügen können, um mehr Kontext oder Erklärungen für jeden Begriff zu liefern.
Styling von Definitionslisten mit CSS
Um das Aussehen von Definitionslisten zu ändern, können Sie CSS-Stile auf die Elemente <dl>, <dt> und <dd> anwenden. Dies ermöglicht Ihnen die Kontrolle über Layout, Abstände, Typografie und andere visuelle Aspekte der Liste.
Beispiel-CSS für Definitionslisten
dl {
margin-bottom: 20px;
}
dt {
font-weight: bold;
margin-top: 10px;
}
dd {
margin-left: 20px;
margin-bottom: 10px;
}| Element | Eigenschaft | Beschreibung |
|---|---|---|
dl |
margin-bottom |
Fügt Abstand unter der Liste hinzu und trennt sie von anderen Inhalten. |
dt |
font-weight |
Macht die Begriffe fett, damit sie hervorstechen. |
dt |
margin-top |
Fügt Abstand über jedem Begriff hinzu, um eine visuelle Trennung zwischen den Begriffen zu schaffen. |
dd |
margin-left |
Rückt die Definitionen ein und erzeugt eine visuelle Hierarchie. |
dd |
margin-bottom |
Fügt Abstand unter jeder Definition hinzu, um sie voneinander zu trennen. |
Sie können auch andere CSS-Eigenschaften verwenden, um das Aussehen von Definitionslisten weiter zu ändern:
| Eigenschaft | Beschreibung |
|---|---|
font-family und font-size |
Steuert die Typografie von Begriffen und Definitionen. |
color und background-color |
Ändert die Text- und Hintergrundfarben. |
padding |
Fügt inneren Abstand innerhalb der <dt> und <dd> Elemente hinzu. |
border |
Fügt Ränder um die Begriffe oder Definitionen hinzu. |
list-style-type |
Ändert den Aufzählungsstil für die Definitionen (obwohl Definitionslisten standardmäßig keine Aufzählungszeichen haben). |
Durch die Kombination dieser CSS-Eigenschaften können Sie optisch ansprechende und gut strukturierte Definitionslisten erstellen, die zum Gesamtdesign Ihrer Webseite passen.
Denken Sie daran, Klassennamen oder IDs zu verwenden, um bestimmte Definitionslisten anzusprechen, wenn Sie mehrere Listen auf einer Seite haben und verschiedene Stile auf jede anwenden möchten.
Barrierefreiheit
Bei der Verwendung von Definitionslisten in HTML ist es wichtig, die Barrierefreiheit zu berücksichtigen, damit Ihre Inhalte für alle Nutzer, einschließlich Menschen mit Behinderungen, nutzbar und verständlich sind.
Die korrekte Verwendung von Definitionslisten fördert die Barrierefreiheit, indem sie dem Inhalt eine klare Struktur und semantische Bedeutung verleiht. Screenreader und andere unterstützende Technologien können die Beziehung zwischen Begriffen und ihren Definitionen erkennen und vermitteln, was es den Nutzern erleichtert, die Informationen zu navigieren und zu verstehen.
Um die Barrierefreiheit bei der Verwendung von Definitionslisten zu verbessern:
| Tipp | Beschreibung |
|---|---|
| Klare und beschreibende Begriffe verwenden | Wählen Sie Begriffe, die das zu definierende Konzept genau beschreiben. Vermeiden Sie Abkürzungen oder Fachbegriffe ohne Erklärung. |
| Prägnante und aussagekräftige Definitionen bereitstellen | Verfassen Sie Definitionen, die den Begriff klar und leicht verständlich erklären. Vermeiden Sie komplexe Sprache oder lange, verschachtelte Erklärungen. |
| Korrekt verschachteln | Stellen Sie sicher, dass die <dt> und <dd> Elemente korrekt innerhalb des <dl> Elements verschachtelt sind. Falsche Verschachtelung kann Screenreader verwirren und die Struktur der Liste stören. |
| Angemessene Überschriftenebenen verwenden | Wenn Ihre Definitionsliste Teil eines größeren Abschnitts oder Dokuments ist, verwenden Sie angemessene Überschriftenebenen (<h1> bis <h6>), um eine hierarchische Struktur zu schaffen und Nutzern die Navigation des Inhalts zu erleichtern. |
| Alternativen Text für Bilder bereitstellen | Wenn Sie Bilder in Ihrer Definitionsliste verwenden, stellen Sie sicher, dass Sie alternativen Text mit dem alt Attribut bereitstellen. Dies ermöglicht sehbehinderten Nutzern, den Inhalt des Bildes zu verstehen. |
| Mit unterstützenden Technologien testen | Um zu überprüfen, ob Ihre Definitionsliste barrierefrei ist, testen Sie sie mit verschiedenen unterstützenden Technologien, wie Screenreadern, um sicherzustellen, dass der Inhalt korrekt vermittelt und navigierbar ist. |
Indem Sie diese Barrierefreiheitsaspekte berücksichtigen, können Sie Definitionslisten erstellen, die für ein breites Spektrum von Nutzern inklusiv und nutzbar sind, unabhängig von ihren Fähigkeiten oder den Geräten, mit denen sie auf Ihre Inhalte zugreifen.
Denken Sie daran, Barrierefreiheit ist nicht nur eine Anforderung, sondern auch eine bewährte Praxis, die allen Nutzern zugutekommt. Indem Sie Ihre Definitionslisten barrierefrei gestalten, verbessern Sie die gesamte Nutzererfahrung und stellen sicher, dass Ihre Inhalte ein breiteres Publikum erreichen.