<kbd>
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.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 2 von 5
- Stand
- 04.02.2026
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
3 BeispieleBei 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>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>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
3 Punkte- 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
3 Punkte-
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
5 von 5Das kbd-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
2 von 5Die Unterstützung von kbd in Email-Clients ist eingeschränkt. Die Monospace-Darstellung wird nicht überall übernommen.
-
Apple Mail
Komplett
-
Gmail
Teilweise
Das Element wird gerendert, aber die Monospace-Schrift wird nicht immer angewendet
-
Outlook
Teilweise
Ältere Versionen ignorieren kbd. Verwende inline font-family: monospace als Fallback
-
Thunderbird
Komplett
-
Yahoo Mail
Teilweise
Monospace-Schrift wird nicht immer dargestellt
Newsletter
einmal die Woche, kostenlosNeue 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