Begriffe mit HTML definieren

HTML bietet mehrere Möglichkeiten, um Beschreibungstexte semantisch zu vermitteln, sei es inline oder als strukturierte Glossare. In diesem Artikel werden wir erläutern, wie Sie Schlüsselwörter ordnungsgemäß kennzeichnen, wenn Sie diese definieren.

Voraussetzungen: Sie sollten mit der Erstellung eines einfachen HTML-Dokuments vertraut sein.
Ziel: Erlernen, wie neue Schlüsselwörter eingeführt und wie Beschreibungslisten erstellt werden.

Wenn Sie einen Begriff definiert brauchen, gehen Sie wahrscheinlich direkt zu einem Wörterbuch oder Glossar. Wörterbücher und Glossare assoziieren formell 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 erstellt wurde.

Um mit diesen Anwendungsfällen umzugehen, bietet HTML Tags an, um Beschreibungen und beschriebene Wörter zu kennzeichnen, sodass Ihre Bedeutung richtig bei Ihren Lesern ankommt.

Anleitung zur Kennzeichnung informeller Beschreibungen

In Lehrbüchern wird das Schlüsselwort beim ersten Auftreten häufig fett gedruckt und sofort definiert.

Das machen wir auch in HTML, außer dass HTML kein visuelles Medium ist und wir deshalb nicht fett verwenden. Wir verwenden <dfn>, ein spezielles Element, nur um das erste Auftreten von Schlüsselwörtern zu kennzeichnen. Beachten Sie, dass <dfn>-Tags um das zu definierende Wort stehen und 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 von Fett ist, um Inhalte hervorzuheben. Fett selbst ist ein Konzept, das in HTML fremd ist, aber es gibt Tags, um Hervorhebung anzuzeigen.

Besonderer Fall: Abkürzungen

Es ist am besten, Abkürzungen speziell zu kennzeichnen mit <abbr>, damit Screenreader sie angemessen lesen und Sie auf alle Abkürzungen einheitlich zugreifen können. Genau wie bei jedem neuen Schlüsselwort sollten Sie Ihre Abkürzungen definieren, wenn sie zum ersten Mal vorkommen.

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 stellt das title-Attribut tatsächlich zur Verfügung, um die Abkürzung zu erweitern. Dies ist jedoch keine akzeptable Alternative, um eine Inline-Erweiterung bereitzustellen. Der Inhalt von title ist für Ihre Nutzer vollständig verborgen, es sei denn, sie verwenden eine Maus und fahren zufällig über die Abkürzung. Die Spezifikation erkennt dies auch an.

Verbesserung der Zugänglichkeit

<dfn> kennzeichnet das definierte Schlüsselwort und zeigt an, dass der aktuelle Absatz das Schlüsselwort definiert. Mit anderen Worten, es gibt eine implizite Beziehung zwischen dem <dfn>-Element und seinem Container. Wenn Sie eine formalere Beziehung wünschen oder Ihre Definition nur aus einem Satz besteht und nicht aus dem gesamten Absatz, 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 oft verwenden, um eine Textalternative zu einem bestimmten Begriff zu finden. Sie können aria-describedby an jedem Tag verwenden, das ein Schlüsselwort einschließt, das definiert werden soll (nicht nur das <dfn>-Element). aria-describedby verweist auf die id des Elements, das die Beschreibung enthält.

Anleitung zum Erstellen einer Beschreibungslist

Beschreibungslisten 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: Beschreibungslisten sind nicht geeignet zur Markierung von Dialogen, da Gespräche die Sprecher nicht direkt beschreiben. Hier sind Empfehlungen zur Markierung von Dialogen.

Die beschriebenen Begriffe befinden sich in <dt>-Elementen. Die passende Beschreibung folgt unmittelbar und ist in einem oder mehreren <dd>-Elementen enthalten. Schließen Sie die gesamte Beschreibungslist mit einem <dl>-Element ein.

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 Grundmuster, wie Sie sehen können, besteht darin, <dt>-Begriffe mit <dd>-Beschreibungen abzuwechseln. Wenn zwei oder mehr Begriffe in Folge auftreten, gilt die folgende Beschreibung für alle. Wenn zwei oder mehr Beschreibungen in Folge auftreten, gelten alle für den zuletzt genannten Begriff.

Verbesserung der visuellen Ausgabe

So stellt ein grafischer Browser die obige Liste dar:

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

css
dt {
  font-weight: bold;
}

Dies erzeugt das leicht besser lesbare Ergebnis unten:

Mehr erfahren