<dfn>

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.

Steckbrief <dfn>

Kategorie: Text & Typografie
Art: Inline
Attribute: 1
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

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

Attribute

1 Attribut

Attribut und Beispiel	Beschreibung
`title` String title="Hypertext Markup Language"	Der definierte Begriff, wenn er vom sichtbaren Textinhalt abweicht. Browser zeigen den Wert als Tooltip beim Hover an.

Beispiele

3 Beispiele

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

index.html

Begriffsdefinition

<!-- 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>

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:

index.html

Kombination mit abbr

<!-- 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>

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:

index.html

dfn mit title-Attribut

<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

3 Punkte

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

3 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Text wird kursiv dargestellt, die semantische Bedeutung als Definition wird nicht erkannt
Gmail

Teilweise

Gmail rendert den Text kursiv, ignoriert aber die dfn-Semantik
Outlook

Teilweise

Kursivdarstellung funktioniert, semantische Bedeutung geht verloren
Thunderbird

Teilweise

Grundlegende Darstellung funktioniert
Yahoo Mail

Teilweise

Text wird kursiv angezeigt, dfn-Element hat keine spezielle Funktion

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<dfn>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter