W3docs
de
Anmelden

HTML <dfn>-Tag

Das HTML <dfn>-Tag markiert die definierende Instanz eines Begriffs. Unterschiede zu <i>/<em>, title, <abbr> und id-Beispiele.

Das HTML-Tag <dfn> markiert die definierende Instanz eines Begriffs — die Stelle im Text, an der dieser Begriff eingeführt und erklärt wird. Browser rendern den Inhalt standardmäßig in Kursivschrift, doch das Tag betrifft die Bedeutung, nicht das Aussehen: Es teilt dem Browser, Suchmaschinen und assistiven Technologien mit: „Hier wird dieses Wort definiert."

Warum <dfn> statt <i> oder <em> verwenden?

Es liegt nahe, <i> oder <em> zu verwenden, um einen Begriff kursiv darzustellen, aber diese Tags enthalten keine Information darüber, was der Text bedeutet:

  • <i> ist rein stilistisch — kursiver Text ohne besondere Semantik.
  • <em> markiert Betonung (eine Veränderung der gesprochenen Intonation), keine Definition.
  • <dfn> ist semantisch und maschinenlesbar: Es identifiziert explizit den definierten Begriff. Screenreader können es als Definition ankündigen, und Werkzeuge können daraus Glossare erstellen.

Wenn die Kursivschrift also existiert, weil ein Begriff zum ersten Mal definiert wird, verwende <dfn>. Wenn du lediglich Kursivschrift oder Betonung möchtest, verwende <i> oder <em>.

Syntax

Das Tag <dfn> kommt paarweise vor — der Inhalt wird zwischen dem öffnenden <dfn> und dem schließenden </dfn> Tag geschrieben.

Das umgebende <p>-Tag, das Paar <dt>/<dd> oder das <section>-Tag dient als Definitionskontext für den Begriff: Der von <dfn> definierte Begriff sollte innerhalb desselben Blocks erklärt werden.

Einfaches Beispiel des HTML-Tags <dfn>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (HyperText Markup Language) — the standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the HTML language.</p>
  </body>
</html>
Probier es selbst »

dfn-Beispiel

Wie der definierte Begriff identifiziert wird

Der Browser entscheidet, welches Wort ein <dfn> definiert, anhand dieser Regeln in dieser Reihenfolge:

  • Wenn <dfn> ein title-Attribut hat, ist der Wert von title der definierte Begriff. Der sichtbare Text kann dann eine Abkürzung sein (häufig mit <abbr>).
  • Wenn <dfn> genau ein untergeordnetes Element hat — ein <abbr>-Element mit einem title-Attribut — und <dfn> keinen weiteren Textinhalt hat, ist der title des <abbr> der definierte Begriff.
  • Andernfalls ist der sichtbare Textinhalt von <dfn> der definierte Begriff.

Beispiel mit einem title-Attribut

Hier wird der title-Wert als der vollständige definierte Begriff behandelt, während der sichtbare Text kurz bleibt:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Mouse over to see the definition.</p>
    <dfn title="HyperText Markup Language">HTML</dfn>
  </body>
</html>
Probier es selbst »
Warnung

Der title-Tooltip erscheint nur beim Überfahren mit der Maus und ist für Tastatur- und Touch-Nutzer unsichtbar. Platziere wesentliche Informationen niemals ausschließlich im title — ergänze den Begriff durch sichtbaren erklärenden Text oder verwende <abbr>, damit die Ausschreibung semantisch verfügbar ist.

Beispiel mit dem <abbr>-Tag

Die Kombination von <dfn> mit <abbr> ist ein verbreitetes, barrierefreies Muster: <dfn> markiert die definierende Instanz, und <abbr> liefert die vollständige Ausschreibung über sein title.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Mouse over to see the definition.</p>
    <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
  </body>
</html>
Probier es selbst »

Zurück zur Definition verlinken mit einer id

Wenn du einem <dfn> eine id hinzufügst, kannst du von überall auf der Seite mit einem <a>-Element über ein Fragment (#) darauf verlinken. So können Leser direkt zur Definition eines Begriffs springen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <dfn id="ajax-def">AJAX</dfn> is a technique for updating parts of a
      web page without reloading the whole page.
    </p>

    <p>Later on, we mention <a href="#ajax-def">AJAX</a> again — click the
    link to jump back to its definition.</p>
  </body>
</html>

Attribute

AttributWertBeschreibung
titletextGibt die vollständige Definition oder Ausschreibung des Begriffs an. Wenn vorhanden, überschreibt es den Standardbegriff und wird beim Hover als Tooltip angezeigt.

Das Tag <dfn> unterstützt auch die globalen Attribute und die Ereignis-Attribute.

So gestaltest du ein HTML-<dfn>-Tag

dfn {
  color: #0056b3;
  font-weight: bold;
}

Übungen

Übung
Was markiert das HTML-Tag <dfn> in einem Dokument?
Was markiert das HTML-Tag <dfn> in einem Dokument?
Was this page helpful?