<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 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> (Sample Output) Element verschachtelt werden, um verschiedene Formen von Eingabe oder Ausgabe 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:

• Das Verschachteln eines <kbd> Elements innerhalb eines anderen <kbd> Elements repräsentiert eine tatsächliche Taste oder eine andere Eingabeeinheit als Teil einer größeren Eingabe. Siehe Repräsentation von Tastenanschlägen innerhalb einer Eingabe unten.
• Das Verschachteln eines <kbd> Elements in einem <samp> Element stellt Eingaben dar, die vom System an den Benutzer zurückgegeben wurden. Siehe Eingabe wiedergegeben weiter unten für ein Beispiel.
• Das Verschachteln eines <samp> Elements in einem <kbd> Element hingegen repräsentiert Eingaben, die auf vom System präsentierten Texte basieren, wie z.B. die Namen von Menüs und Menüeinträgen oder die Namen von auf dem Bildschirm angezeigten Schaltflächen. Siehe das Beispiel unter Repräsentation 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, die aus mehreren Tastenanschlägen besteht, 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 Komponent der Eingabe in seinem eigenen <kbd> eingeschlossen ist.

Ohne Stil

Zuerst schauen wir uns an, wie das in einfachen 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 ihrem eigenen, um die Komponenten der Reihenfolge zu kennzeichnen.

Ergebnis

Ohne ein Stylesheet angewendet sieht die Ausgabe so aus:

Mit benutzerdefinierten Styles

Wir können mehr Klarheit gewinnen, indem wir etwas CSS hinzufügen:

CSS

Wir fügen einen neuen Selektor für verschachtelte <kbd> Elemente hinzu, kbd>kbd, 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 Tasten in der Ausgabe 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!

Das Verschachteln eines <kbd> Elements innerhalb eines <samp> Elements stellt Eingaben dar, die vom System an den Benutzer zurückgegeben wurden.

<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 in einem <kbd> Element repräsentiert Eingaben, die auf Text basieren, der vom System präsentiert wird, 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 Sie die Option "Neues Dokument" im Menü "Datei" auswählen, indem Sie HTML verwenden, 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>

Dies macht eine interessante Verschachtelung. Für die Menüoptionsbeschreibung ist die gesamte Eingabe in einem <kbd> Element eingeschlossen. Dann sind innerhalb dieses Elements sowohl die Menü- als auch die Menüeintragsnamen in <kbd> und <samp> enthalten, was eine Eingabe darstellt, die von einem Bildschirmelement ausgewählt wird.

Ergebnis

• <code>