<kbd>

Zuletzt aktualisiert am 4. Februar 2026

Das <kbd>-Element kennzeichnet Tastatureingaben, also Text, den der Nutzer über die Tastatur (oder ein anderes Eingabegerät) eingibt. Browser stellen <kbd> standardmäßig in einer Monospace-Schrift dar. Typische Anwendungsfälle sind Tastenkombinationen in Dokumentationen, einzelne Tastenangaben in Tutorials oder Befehle, die der Nutzer eingeben soll. <kbd> ist Teil einer Familie von drei Elementen: <kbd> für Eingabe, <samp> für Ausgabe und <code> für Code. Auf dieser Seite lernst du, wie du <kbd> richtig einsetzt, wie Verschachtelung funktioniert und worin der Unterschied zu <code> liegt.

Grundlagen

In Tutorials und Dokumentationen musst du oft beschreiben, welche Tasten der Nutzer drücken soll. Genau dafür ist <kbd> gedacht. Es macht die Eingabe semantisch erkennbar und hebt sie visuell durch die Monospace-Schrift vom Fließtext ab.

• <kbd> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <kbd> standardmäßig in Monospace-Schrift dar (gleiche Schrift wie <code>)
• Die semantische Bedeutung: “Dies ist eine Benutzereingabe (Tastatur oder anderes Eingabegerät)”
• Typische Anwendungsfälle: Einzelne Tasten (Ctrl, Enter), Tastenkombinationen (Ctrl+C), Texteingaben in Formularen oder im Terminal
• <kbd> hat keine elementspezifischen Attribute, nur die globalen HTML-Attribute
• Für die visuelle Gestaltung als “Tastenkappen” (abgerundete Boxen) brauchst du zusätzliches CSS: Das ist kein Browser-Standard

Syntax

<p>Drücke <kbd>Enter</kbd>, um zu bestätigen.</p>

Beispiele

Tastenkombinationen

Bei Tastenkombinationen verschachtelst du <kbd>-Elemente: Das äußere <kbd> umschließt die gesamte Kombination, die inneren <kbd>-Elemente kennzeichnen die einzelnen Tasten. Das ist die empfohlene Methode laut HTML-Spezifikation:

<p>Kopieren: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd></p>
<p>Einfügen: <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd></p>
<p>Rückgängig: <kbd><kbd>Ctrl</kbd>+<kbd>Z</kbd></kbd></p>
<p>Alles markieren: <kbd><kbd>Ctrl</kbd>+<kbd>A</kbd></kbd></p>

kbd vs. code vs. samp

Diese drei Elemente sehen ähnlich aus (alle Monospace), haben aber unterschiedliche Bedeutungen. Hier der Unterschied:

<!-- kbd: Benutzereingabe -->
<p><kbd>npm install</kbd>: Das gibt der Nutzer ein (Eingabe)</p>

<!-- samp: Computerausgabe -->
<p><samp>added 150 packages</samp>: Das gibt der Computer aus (Ausgabe)</p>

<!-- code: Quellcode -->
<p><code>const x = 42;</code>: Das ist Quellcode (Code)</p>

Tastatureingaben in Anleitungen

In Schritt-für-Schritt-Anleitungen helfen <kbd>-Elemente dem Leser, die Eingaben schnell zu erkennen:

<p>1. Öffne das Terminal mit
<kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd></kbd></p>

<p>2. Gib <kbd>cd ~/projekte</kbd> ein und drücke <kbd>Enter</kbd></p>

<p>3. Starte den Server mit <kbd>npm run dev</kbd></p>

Barrierefreiheit

• Screenreader-Verhalten: Die meisten Screenreader behandeln <kbd> wie normalen Text und kündigen es nicht gesondert an. Der Nutzer hört den Inhalt, aber nicht, dass es sich um eine Tastatureingabe handelt.
• Kontext bieten: Schreibe immer dazu, was der Nutzer tun soll, z.B. “Drücke Enter” statt nur “Enter”. Der umgebende Text macht den Zweck klar.
• Pluszeichen bei Kombinationen: Verwende + zwischen den Tasten einer Kombination (z.B. Ctrl+C). Das ist die etablierte Konvention, die auch blinde Nutzer verstehen.

Häufige Fehler

• kbd für Quellcode verwenden: <kbd> ist für Benutzereingaben, nicht für Programmcode. Wenn du eine Variable oder Funktion zeigen willst, verwende <code>. <kbd> sagt “das tippt der Nutzer ein”, <code> sagt “das ist Code”.

• Verschachtelung bei Tastenkombinationen vergessen: Schreibe nicht <kbd>Ctrl+C</kbd> als Ganzes, sondern verschachtele die einzelnen Tasten: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>. So wird jede Taste einzeln als Eingabe erkennbar.

• kbd mit b oder strong verwechseln: <kbd> ist semantisch eine Benutzereingabe, nicht einfach fetter oder hervorgehobener Text. Verwende <kbd> nur, wenn du eine tatsächliche Eingabe beschreibst.

Browser-Kompatibilität

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

Email-Kompatibilität

Die Unterstützung von kbd in Email-Clients ist eingeschränkt. Die Monospace-Darstellung wird nicht überall übernommen.

Verwandte Elemente