<kbd>: Das Keyboard Input-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 rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(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> (Sample Output) Element verschachtelt werden, um verschiedene Formen der Eingabe oder Ausgabe basierend auf visuellen Hinweisen darzustellen.

Dieses Element umfasst nur die globalen Attribute.

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

• Die Verschachtelung eines <kbd> Elements innerhalb eines anderen <kbd> Elements stellt eine tatsächliche Taste oder eine andere Eingabeeinheit als Teil einer größeren Eingabe dar. Siehe Darstellung von Tastenanschlägen innerhalb einer Eingabe unten.
• Die Verschachtelung eines <kbd> Elements in einem <samp> Element stellt eine Eingabe dar, die vom System an den Benutzer zurückgegeben wurde. Siehe Eingabe mit Echo unten für ein Beispiel.
• Die Verschachtelung eines <samp> Elements in einem <kbd> Element hingegen repräsentiert eine Eingabe, die auf Text basiert, der vom System angezeigt wird, wie z.B. Namen von Menüs und Menüoptionen oder Namen von Tasten, die auf dem Bildschirm angezeigt werden. 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 bestehend aus mehreren Tastenanschlägen zu beschreiben, können Sie mehrere <kbd> Elemente verschachteln, wobei ein äußeres <kbd> Element die gesamte Eingabe repräsentiert und jeder einzelne Tastenanschlag oder Bestandteil der Eingabe in seinem eigenen <kbd> enthalten ist.

Unformatiert

Schauen wir uns zunächst an, wie das als normales 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 Tastensequenz in einem äußeren <kbd> Element und dann jede einzelne Taste in ihrem eigenen, um die Bestandteile der Sequenz zu kennzeichnen.

Ergebnis

Die Ausgabe sieht so aus, ohne dass ein Stylesheet angewendet wurde:

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 auf die Tasten in der bereitgestellten 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!

Die Verschachtelung eines <kbd> Elements in einem <samp> Element 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

Die Verschachtelung eines <samp> Elements in einem <kbd> Element repräsentiert eine Eingabe, die auf Text basiert, der vom System angezeigt wird, wie z.B. die Namen von Menüs und Menüoptionen oder die Namen von Tasten, die auf dem Bildschirm angezeigt werden.

Sie können beispielsweise erklären, wie die "Neues Dokument"-Option im "Datei"-Menü mithilfe von HTML, das wie folgt aussieht, gewählt wird:

<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 macht einige interessante Verschachtelungen. Für die Menüoption Beschreibung wird die gesamte Eingabe in ein <kbd> Element eingeschlossen. Dann sind die Namen von Menü und Menüpunkt sowohl in <kbd> als auch in <samp> enthalten und zeigen eine Eingabe an, die aus einem Bildschirmelement ausgewählt wird.

Ergebnis

• <code>