<kbd>: Das Tastatureingabe-Element

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

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

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

Dieses Element enthält nur die globalen Attribute.

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

• Das Verschachteln eines <kbd>-Elements in einem anderen <kbd>-Element repräsentiert eine tatsächliche Taste oder eine andere Eingabeeinheit als Teil einer größeren Eingabe. Siehe Darstellung von Tasteneingaben innerhalb einer Eingabe unten.
• Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt eine Eingabe dar, die vom System an den Benutzer zurückgegeben wurde. Siehe Zurückgegebene Eingabe unten für ein Beispiel.
• Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements hingegen repräsentiert Eingaben, die auf textlichen Informationen beruhen, die vom System präsentiert werden, wie die Namen von Menüs und Menüeinträgen oder die Namen von auf dem Bildschirm angezeigten Schaltflächen. Siehe das Beispiel unter Darstellung von Bildschirm-Eingabeoptionen unten.

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

Ergebnis

Um eine Eingabe zu beschreiben, die aus mehreren Tastenanschlägen besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die Gesamteingabe und jeder einzelne Tastenanschlag oder Komponente der Eingabe mit seinem eigenen <kbd> eingeschlossen ist.

Unformatiert

Zuerst schauen wir uns an, wie das als einfaches HTML aussieht.

HTML

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

Dies umschließt die gesamte Tastenkombination in einem äußeren <kbd>-Element und dann jede einzelne Taste in ihrem eigenen, um die Komponenten der Sequenz darzustellen.

Ergebnis

Die Ausgabe sieht ohne ein angewendetes Stylesheet so aus:

Mit benutzerdefinierten Stilen

Wir können das 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 bei der Darstellung von Tastatureingaben 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 auf die Tasten in der dargestellten Ausgabe anzuwenden:

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

Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt eine Eingabe dar, die vom System an den Benutzer 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

Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements repräsentiert Eingaben, die auf textlichen Informationen beruhen, die vom System präsentiert werden, wie die Namen von Menüs und Menüeinträgen oder die Namen von auf dem Bildschirm angezeigten Schaltflächen.

Zum Beispiel können Sie erklären, wie die Option "Neues Dokument" im "Datei"-Menü mithilfe von HTML wie folgt ausgewählt werden kann:

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

Dies führt interessante Verschachtelungen durch. Für die Menüoptionsbeschreibung wird die gesamte Eingabe in ein <kbd>-Element eingeschlossen. Dann sind im Inneren sowohl die Menü- als auch die Menüpunktenamen sowohl in <kbd> als auch <samp> enthalten, was auf eine Eingabe hinweist, die aus einem Bildschirm-Widget ausgewählt wird.

Ergebnis

• <code>