<kbd> HTML Keyboard-Eingabeelement

Probieren Sie es aus

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

<kbd> kann in verschiedenen Kombinationen mit dem <samp>-Element (Beispielausgabe) verschachtelt werden, um verschiedene Formen von Ein- oder Ausgaben basierend auf visuellen Hinweisen darzustellen.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

Andere Elemente können zusammen mit <kbd> verwendet werden, um spezifischere Szenarien darzustellen:

• Die Verschachtelung eines <kbd>-Elements innerhalb eines anderen <kbd>-Elements repräsentiert einen tatsächlichen Tastendruck oder eine andere Eingabeeinheit als Teil einer größeren Eingabe. Siehe Darstellung von Tastendrücken innerhalb einer Eingabe unten.
• Die Verschachtelung eines <kbd>-Elements in einem <samp>-Element stellt eine Eingabe dar, die dem Benutzer vom System zurückgegeben wurde. Ein Beispiel dazu finden Sie unter Zurückgegebene Eingabe.
• Die Verschachtelung eines <samp>-Elements in einem <kbd>-Element hingegen repräsentiert eine Eingabe, die auf vom System präsentierten Text basiert, wie z.B. Namen von Menüs und Menüeinträgen oder die Bezeichnungen von Schaltflächen auf dem Bildschirm. Siehe das Beispiel unter Darstellung von Bildschirm-Eingabeoptionen unten.

Beispiele

Einfaches Beispiel

<p>
  Use the command <kbd>help my-command</kbd> to view documentation for the
  command "my-command".
</p>

Ergebnis

Darstellung von Tastendrücken innerhalb einer Eingabe

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.

Unformatiert

Sehen wir uns zunächst an, wie das in einfachem HTML aussieht.

HTML

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

Das 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.

Ergebnis

Ohne angewandtes Stylesheet sieht die Ausgabe so aus:

Mit benutzerdefinierten Stilen

Wir können dies verständlicher machen, indem wir etwas CSS hinzufügen:

CSS

Wir fügen einen neuen Selektor für verschachtelte <kbd>-Elemente, kbd>kbd, hinzu, den wir beim Rendern von Tastaturtasten anwenden können:

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

Dann aktualisieren wir das HTML, um diese Klasse für die in der Ausgabe dargestellten Tasten zu verwenden:

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

Ergebnis

Das Ergebnis ist genau das, was wir wollen!

Zurückgegebene Eingabe

Die Verschachtelung eines <kbd>-Elements in einem <samp>-Element repräsentiert eine Eingabe, die dem Benutzer vom System zurückgegeben wurde.

<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

Ergebnis

Darstellung von Bildschirm-Eingabeoptionen

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:

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>

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.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <code>