Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <kbd>-Element HTML repräsentiert einen Textabschnitt, der eine Benutzereingabe über die Tastatur, Spracheingabe oder ein anderes Texteingabegerät beschreibt. Üblicherweise rendert der User-Agent den Inhalt eines <kbd>-Elements mit seiner Standard-Schriftart für Monospace, obwohl dies vom HTML-Standard nicht vorgeschrieben ist.
<kbd> kann in verschiedenen Kombinationen mit dem <samp>-Element (Beispielausgabe) verschachtelt werden, um verschiedene Formen von Ein- oder Ausgaben basierend auf visuellen Hinweisen darzustellen.
Dieses Element enthält nur die globalen Attribute.
Andere Elemente können zusammen mit <kbd> verwendet werden, um spezifischere Szenarien darzustellen:
Hinweis: Sie können einen benutzerdefinierten Stil festlegen, um die Standard-Schriftauswahl des Browsers für das <kbd>-Element zu überschreiben, obwohl die Vorlieben des Benutzers möglicherweise Ihre CSS überschreiben können.
Um eine Eingabe zu beschreiben, die aus mehreren Tastendrücken besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die gesamte Eingabe darstellt und jeder einzelne Tastendruck oder Bestandteil der Eingabe in einem eigenen <kbd> eingeschlossen ist.
Sehen wir uns zunächst an, wie das in einfachem HTML aussieht.
HTMLDas umschließt die gesamte Tastenfolge in einem äußeren <kbd>-Element und dann jede einzelne Taste in einem eigenen, um die Bestandteile der Sequenz zu kennzeichnen.
Hinweis: Sie müssen nicht all diese Verschachtelungen vornehmen; Sie können es vereinfachen, indem Sie das äußere <kbd>-Element weglassen. Einfacher gesagt, dies auf <kbd>Ctrl</kbd>+<kbd>N</kbd> zu reduzieren, wäre vollkommen gültig.
Abhängig von Ihrem Stylesheet finden Sie diese Art der Verschachtelung jedoch möglicherweise nützlich.
Ohne angewandtes Stylesheet sieht die Ausgabe so aus:
Wir können dies verständlicher machen, indem wir etwas CSS hinzufügen:
CSSWir fügen einen neuen Selektor für verschachtelte <kbd>-Elemente, kbd>kbd, hinzu, den wir beim Rendern von Tastaturtasten anwenden können:
Dann aktualisieren wir das HTML, um diese Klasse für die in der Ausgabe dargestellten Tasten zu verwenden:
Das Ergebnis ist genau das, was wir wollen!
Die Verschachtelung eines <kbd>-Elements in einem <samp>-Element repräsentiert eine Eingabe, die dem Benutzer vom System zurückgegeben wurde.
Die Verschachtelung eines <samp>-Elements in einem <kbd>-Element repräsentiert eine Eingabe, die auf vom System präsentierten Text basiert, wie z.B. die Namen von Menüs und Menüeinträgen oder die Bezeichnungen von Schaltflächen auf dem Bildschirm.
Zum Beispiel können Sie erklären, wie Sie die Option "Neues Dokument" im Menü "Datei" auswählen, durch HTML, das so aussieht:
Das umfasst eine interessante Verschachtelung. Für die Beschreibung der Menüoption ist die gesamte Eingabe in einem <kbd>-Element eingeschlossen. Dann sind innerhalb dessen sowohl die Menünamen als auch die Menüeintragsnamen in <kbd> und <samp> enthalten, was eine Eingabe darstellt, die aus einem Bildschirm-Widget ausgewählt wird.
| Fluss-Inhalt, Phrasierungs-Inhalt, greifbarer Inhalt. |
| Phrasierungs-Inhalt. |
| Keine, sowohl der Start- als auch der End-Tag sind obligatorisch. |
| Jedes Element, das Phrasierungs-Inhalt akzeptiert. |
| Keine entsprechende Rolle |
| Beliebig |
| [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
| HTML # the-kbd-element |
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Der Bauplan für ein besseres Internet.
Besuche die gemeinnützige Muttergesellschaft der Mozilla Corporation, die Mozilla Foundation.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.