Definitionen mit HTML

HTML bietet mehrere Möglichkeiten, semantische Beschreibungen entweder inline oder als strukturierte Glossare zu vermitteln. In diesem Artikel werden wir behandeln, wie Sie Schlüsselwörter richtig markieren, wenn Sie diese definieren.

Voraussetzungen: Sie sollten vertraut sein mit der Erstellung eines einfachen HTML-Dokuments.
Ziel: Lernen Sie, wie man neue Schlüsselwörter einführt und wie man Definitionslisten erstellt.

Wenn Sie einen Begriff definiert haben möchten, schauen Sie wahrscheinlich sofort in ein Wörterbuch oder Glossar. Wörterbücher und Glossare assoziieren formal Schlüsselwörter mit einer oder mehreren Beschreibungen, wie in diesem Fall:

Blau (Adjektiv)

Von einer Farbe wie der Himmel an einem sonnigen Tag. "Der klare blaue Himmel"

Aber wir definieren ständig Schlüsselwörter informell, wie hier:

Firefox ist der Webbrowser, der von der Mozilla Foundation entwickelt wurde.

Um mit diesen Anwendungsfällen umzugehen, bietet HTML Tags zum Markieren von Beschreibungen und beschriebenen Wörtern, sodass Ihre Bedeutung Ihren Lesern korrekt übermittelt wird.

Anleitung zur informellen Beschreibung

In Lehrbüchern ist es üblich, das erste Vorkommen eines Schlüsselworts fett zu markieren und es sofort zu definieren.

Das machen wir auch in HTML, außer dass HTML kein visuelles Medium ist und wir deshalb kein Fett verwenden. Wir benutzen <dfn>, ein spezielles Element, das nur zur Markierung des ersten Vorkommens von Schlüsselwörtern dient. Beachten Sie, dass <dfn>-Tags um das zu definierende Wort herum gehen, nicht um die Definition (die Definition besteht aus dem gesamten Absatz):

html
<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>

Hinweis: Eine andere Verwendung für fett ist, um Inhalte zu betonen. Fett selbst ist ein HTML fremdes Konzept, aber es gibt Tags zur Angabe von Betonung.

Sonderfall: Abkürzungen

Es ist am besten, Abkürzungen speziell zu markieren mit <abbr>, damit Screenreader sie angemessen vorlesen können und Sie alle Abkürzungen einheitlich behandeln können. Genau wie bei jedem neuen Schlüsselwort sollten Sie Ihre Abkürzungen beim ersten Auftreten definieren.

html
<p>
  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
  is a description language used to structure documents on the web.
</p>

Hinweis: Die HTML-Spezifikation reserviert tatsächlich das title-Attribut zur Erweiterung der Abkürzung. Dies ist jedoch keine akzeptable Alternative zur Bereitstellung einer Inline-Erweiterung. Der Inhalt von title ist vollständig für Ihre Benutzer verborgen, es sei denn, sie benutzen eine Maus und schweben zufällig über der Abkürzung. Die Spezifikation erkennt dies ebenfalls an.

Verbesserung der Zugänglichkeit

<dfn> markiert das definierte Schlüsselwort und zeigt an, dass der aktuelle Absatz das Schlüsselwort definiert. Mit anderen Worten, es besteht eine implizite Beziehung zwischen dem <dfn>-Element und seinem Container. Wenn Sie eine formellere Beziehung wünschen oder Ihre Definition aus nur einem Satz anstelle des gesamten Absatzes besteht, können Sie das aria-describedby-Attribut verwenden, um einen Begriff formeller mit seiner Definition zu verknüpfen:

html
<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn>
    is the web browser created by the Mozilla Foundation.
  </span>
  You can download it at <a href="https://www.mozilla.org">mozilla.org</a>
</p>

Hilfstechnologien können dieses Attribut häufig nutzen, um eine Textalternative zu einem gegebenen Begriff zu finden. Sie können aria-describedby auf jedem Tag verwenden, das ein zu definierendes Schlüsselwort umschließt (nicht nur das <dfn>-Element). aria-describedby verweist auf die id des Elements, das die Beschreibung enthält.

Anleitung zum Erstellen einer Definitionsliste

Definitionslisten sind genau das, was sie behaupten zu sein: eine Liste von Begriffen und ihren passenden Beschreibungen (z. B. Definitionslisten, Wörterbucheinträge, FAQs und Schlüssel-Wert-Paare).

Hinweis: Definitionslisten sind nicht geeignet für die Auszeichnung von Dialogen, da Gespräche die Sprecher nicht direkt beschreiben. Hier sind Empfehlungen zur Auszeichnung von Dialogen.

Die beschriebenen Begriffe gehen in <dt>-Elemente. Die passende Beschreibung folgt unmittelbar und ist in einem oder mehreren <dd>-Elementen enthalten. Umgeben Sie die gesamte Definitionsliste mit einem <dl>-Element.

Ein einfaches Beispiel

Hier ist ein Beispiel, das Arten von Lebensmitteln und Getränken beschreibt:

html
<dl>
  <dt>jambalaya</dt>
  <dd>
    rice-based entree typically containing chicken, sausage, seafood, and spices
  </dd>

  <dt>sukiyaki</dt>
  <dd>
    Japanese specialty consisting of thinly sliced meat, vegetables, and
    noodles, cooked in sake and soy sauce
  </dd>

  <dt>chianti</dt>
  <dd>dry Italian red wine originating in Tuscany</dd>
</dl>

Hinweis: Das grundlegende Muster, wie Sie sehen können, besteht darin, <dt>-Begriffe mit <dd>-Beschreibungen abzuwechseln. Wenn zwei oder mehr Begriffe hintereinander vorkommen, gilt die folgende Beschreibung für alle. Wenn zwei oder mehr Beschreibungen hintereinander vorkommen, gelten sie alle für den zuletzt angegebenen Begriff.

Verbesserung der visuellen Ausgabe

So zeigt ein grafischer Browser die obige Liste an:

Wenn Sie möchten, dass die Schlüsselwörter besser hervorstechen, können Sie versuchen, sie fett zu markieren. Denken Sie daran, HTML ist kein visuelles Medium; wir benötigen CSS für alle visuellen Effekte. Die CSS-Eigenschaft font-weight ist hier das, was Sie benötigen:

css
dt {
  font-weight: bold;
}

Dies ergibt das unten leicht besser lesbare Ergebnis:

Mehr erfahren