<dfn>: Das Definitionselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <dfn> HTML-Element zeigt an, dass ein Begriff definiert werden soll. Das <dfn>-Element sollte in einem vollständigen Definitionssatz verwendet werden, bei dem die vollständige Definition des Begriffs eine der folgenden sein kann:

  • Der übergeordnete Absatz (ein Textblock, manchmal durch ein <p>-Element gekennzeichnet)
  • Das <dt>/<dd>-Paar
  • Der nächstgelegene Abschnitt, der Vorfahre des <dfn>-Elements ist,

Probieren Sie es aus

<p>
  A <dfn id="def-validator">validator</dfn> is a program that checks for syntax
  errors in code or documents.
</p>

/* stylelint-disable-next-line block-no-empty */
dfn {
}

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

Das title-Attribut hat eine besondere Bedeutung, wie unten angemerkt.

Nutzungshinweise

Es gibt einige nicht ganz offensichtliche Aspekte bei der Verwendung des <dfn>-Elements. Diese betrachten wir hier.

Definition des zu definierenden Begriffs

Der zu definierende Begriff wird anhand dieser Regeln identifiziert:

  1. Wenn das <dfn>-Element ein title-Attribut hat, wird der Wert des title-Attributs als der zu definierende Begriff angesehen. Das Element muss dennoch Text enthalten, dieser Text kann jedoch eine Abkürzung (vielleicht unter Verwendung von <abbr>) oder eine andere Form des Begriffs sein.
  2. Wenn das <dfn>-Element ein einzelnes Kindelement enthält und keinen eigenen Textinhalt hat, und das Kindelement ein <abbr>-Element mit einem eigenen title-Attribut ist, dann ist der exakte Wert des title-Attributs des <abbr>-Elements der zu definierende Begriff.
  3. Andernfalls ist der Textinhalt des <dfn>-Elements der zu definierende Begriff. Dies wird im ersten Beispiel unten gezeigt.

Hinweis: Wenn das <dfn>-Element ein title-Attribut hat, muss es den zu definierenden Begriff und keinen anderen Text enthalten.

Wenn Sie auf dem <dfn>-Element ein id-Attribut hinzufügen, können Sie dann mit <a>-Elementen darauf verlinken. Solche Links sollten Verwendungen des Begriffs darstellen, mit der Absicht, dass der Leser schnell zur Definition des Begriffs navigieren kann, wenn er nicht bereits bekannt ist, indem er auf den Link des Begriffs klickt.

Dies wird im Beispiel unter Links zu Definitionen unten gezeigt.

Beispiele

Schauen wir uns einige Beispiele für verschiedene Nutzungsszenarien an.

Grundlegende Identifizierung eines Begriffs

Dieses Beispiel verwendet ein einfaches <dfn>-Element, um die Position eines Begriffs innerhalb der Definition zu identifizieren.

HTML

html
<p>
  The <strong>HTML Definition element (<dfn>&lt;dfn&gt;</dfn>)</strong> is used
  to indicate the term being defined within the context of a definition phrase
  or sentence.
</p>

Da das <dfn>-Element kein title hat, werden die Textinhalte des <dfn>-Elements selbst als der zu definierende Begriff verwendet.

Ergebnis

Um Links zu den Definitionen hinzuzufügen, erstellen Sie den Link auf die gleiche Weise wie immer, mit dem <a>-Element.

HTML

html
<p>
  The
  <strong>HTML Definition element (<dfn id="definition-dfn">&lt;dfn&gt;</dfn>)</strong>
  is used to indicate the term being defined within the context of a definition
  phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for this
  project.
</p>

Hier sehen wir die Definition — jetzt mit einem id-Attribut, "definition-dfn", das als Ziel eines Links verwendet werden kann. Später wird ein Link mit <a> erstellt, wobei das href-Attribut auf "#definition-dfn" gesetzt wird, um den Link zurück zur Definition einzurichten.

Ergebnis

Verwendung von Abkürzungen und Definitionen zusammen

In einigen Fällen möchten Sie möglicherweise eine Abkürzung für einen Begriff verwenden, wenn Sie ihn definieren. Dies kann durch die Verwendung der <dfn>- und <abbr>-Elemente zusammen erfolgen, wie folgt:

HTML

html
<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>

Beachten Sie das <abbr>-Element innerhalb des <dfn>. Das erstere stellt fest, dass der Begriff eine Abkürzung ("HST") ist und gibt den vollständigen Begriff ("Hubble Space Telescope") in seinem title-Attribut an. Das letztere zeigt an, dass der abgekürzte Begriff einen zu definierenden Begriff darstellt.

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phraseninhalt, spürbarer Inhalt.
Erlaubter Inhalt Phraseninhalt, aber kein <dfn>-Element darf ein Nachfahre sein.
Tag-Ausslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phraseninhalt akzeptiert.
Implizierte ARIA-Rolle term
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-dfn-element

Browser-Kompatibilität

Siehe auch