<dfn>

Zuletzt aktualisiert am 4. Februar 2026

Das <dfn>-Element kennzeichnet einen Begriff, der an dieser Stelle definiert wird. Es sagt aus: “Hier wird erklärt, was dieses Wort bedeutet.” Browser stellen <dfn> standardmäßig kursiv dar, aber der eigentliche Mehrwert liegt in der Semantik: Suchmaschinen und assistive Technologien erkennen, dass hier eine Begriffsdefinition stattfindet. Besonders nützlich ist <dfn> in Kombination mit <abbr>, um Abkürzungen bei ihrer ersten Verwendung im Text einzuführen.

Grundlagen

In Fachartikeln, Tutorials und Dokumentationen führst du ständig neue Begriffe ein. Für den Leser ist es hilfreich, wenn klar erkennbar ist, wo ein Begriff zum ersten Mal erklärt wird. Genau das leistet <dfn>.

• <dfn> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <dfn> standardmäßig kursiv dar
• Die semantische Bedeutung: “Der umschlossene Text wird an dieser Stelle definiert”
• Das title-Attribut auf <dfn> enthält den definierten Begriff, falls er vom sichtbaren Text abweicht
• <dfn> wird typischerweise nur bei der ersten Verwendung eines Begriffs eingesetzt, bei weiteren Vorkommen ist es nicht nötig
• Häufig kombiniert mit <abbr>: <dfn><abbr title="...">...</abbr></dfn> bedeutet “Hier wird diese Abkürzung definiert”
• Nicht verwechseln mit <abbr>: <abbr> kennzeichnet eine Abkürzung, <dfn> kennzeichnet eine Definition. Beide können zusammen verwendet werden

Syntax

<p><dfn>HTML</dfn> ist eine Auszeichnungssprache,
mit der die Struktur von Webseiten beschrieben wird.</p>

Attribute

Beispiele

Begriffsdefinition im Fließtext

Der einfachste Anwendungsfall: Ein Fachbegriff wird zum ersten Mal im Text verwendet und gleichzeitig erklärt. <dfn> markiert den Begriff als “wird hier definiert”:

<!-- Erste Verwendung: mit dfn markiert -->
<p>
  Ein <dfn>Framework</dfn> ist eine vorgefertigte Sammlung von Code
  und Werkzeugen, die Entwicklern eine Grundstruktur für ihre
  Projekte bietet.
</p>

<!-- Weitere Verwendung: ohne dfn -->
<p>
  Das Framework übernimmt wiederkehrende Aufgaben, sodass du dich
  auf die eigentliche Logik konzentrieren kannst.
</p>

Kombination mit abbr

Wenn du eine Abkürzung zum ersten Mal einführst, kombinierst du <dfn> und <abbr>. Das sagt: “Hier wird diese Abkürzung definiert.” Das title-Attribut auf <abbr> liefert die ausgeschriebene Form:

<!-- Erste Verwendung: Definition + Abkürzung -->
<p>
  <dfn><abbr title="Application Programming Interface">API</abbr></dfn>
  ist eine Schnittstelle, über die Programme miteinander
  kommunizieren können.
</p>

<!-- Weitere Verwendung: nur noch Klartext oder abbr -->
<p>
  Die meisten modernen Webseiten nutzen APIs,
  um Daten von Servern abzurufen.
</p>

dfn mit abweichendem title

Wenn der sichtbare Text nicht dem eigentlichen Fachbegriff entspricht, kannst du das title-Attribut auf <dfn> verwenden. Der Browser zeigt den definierten Begriff als Tooltip:

<p>
  <dfn title="Responsive Web Design">Responsives Design</dfn>
  sorgt dafür, dass Webseiten auf allen Bildschirmgrößen
  gut aussehen, vom Smartphone bis zum Desktop-Monitor.
</p>

Barrierefreiheit

• Screenreader-Verhalten: Die meisten Screenreader erkennen <dfn> und können den Nutzer darauf hinweisen, dass hier ein Begriff definiert wird. Das Verhalten variiert je nach Screenreader und Konfiguration.
• Kursivdarstellung allein reicht nicht: <dfn> wird standardmäßig kursiv dargestellt. Verlasse dich nicht auf die Kursivschrift als einziges Signal: der umgebende Satz sollte klar machen, dass hier eine Definition stattfindet (z.B. “Ein Framework ist…”).
• title-Attribut auf Touch-Geräten: Wie bei <abbr> ist der Tooltip des title-Attributs auf Smartphones und Tablets nicht zugänglich. Wenn der Tooltip wichtige Informationen enthält, stelle sicher, dass diese auch im Text selbst vorkommen.

Häufige Fehler

• dfn bei jeder Verwendung eines Begriffs: <dfn> markiert die Stelle der Definition, nicht jedes Vorkommen des Begriffs. Verwende es nur beim ersten Mal, wenn der Begriff erklärt wird. Bei weiteren Vorkommen ist weder <dfn> noch eine besondere Auszeichnung nötig.

• dfn statt em oder strong: <dfn> ist nicht für allgemeine Hervorhebungen gedacht. Es kennzeichnet ausschließlich Begriffe, die an dieser Stelle definiert werden. Für Betonung verwende <em>, für inhaltliche Wichtigkeit <strong>.

• dfn ohne umgebende Definition: <dfn>Framework</dfn> allein ist semantisch fragwürdig. Der umgebende Absatz sollte tatsächlich erklären, was der Begriff bedeutet. Sonst verliert <dfn> seinen Zweck.

Browser-Kompatibilität

Das dfn-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Email-Kompatibilität

Die Unterstützung von dfn in Email-Clients ist eingeschränkt. Die kursive Darstellung funktioniert meist, aber die semantische Bedeutung geht verloren.

Verwandte Elemente