<kbd>: Das Keyboard Input-Element

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

Dieses Element enthält nur die globalen Attribute.

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

• Das Verschachteln 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 Tasteneingaben innerhalb einer Eingabe darstellen unten.
• Das Verschachteln eines <kbd>-Elements in einem <samp>-Element stellt eine Eingabe dar, die vom System an den Benutzer zurückgegeben wurde. Ein Beispiel finden Sie unter Zurückgegebene Eingabe unten.
• Das Verschachteln eines <samp>-Elements in einem <kbd>-Element hingegen stellt eine Eingabe dar, die auf einem vom System präsentierten Text basiert, wie z. B. die Namen von Menüs und Menüelementen oder die Namen von Schaltflächen, die auf dem Bildschirm angezeigt werden. Siehe das Beispiel unter Darstellung von Bildschirmeingabeoptionen 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 Tastendrücken besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die Gesamteingabe und jede einzelne Taste oder Komponente der Eingabe in ihrem eigenen <kbd>-Element eingeschlossen ist.

Ohne Stil

Zuerst sehen wir uns an, wie dies 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 umfasst die gesamte Tastenfolge in einem äußeren <kbd>-Element, dann jede einzelne Taste in ihrem eigenen, um die Komponenten der Sequenz zu kennzeichnen.

Ergebnis

Ohne ein Stylesheet sieht die Ausgabe folgendermaßen 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 hinzu, kbd>kbd, den wir beim Rendern von Tasteneingaben 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 präsentierten 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 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

Das Verschachteln eines <samp>-Elements in einem <kbd>-Element stellt eine Eingabe dar, die auf einem vom System präsentierten Text basiert, wie z. B. die Namen von Menüs und Menüelementen oder die Namen von Schaltflächen, die auf dem Bildschirm angezeigt werden.

Zum Beispiel können Sie erklären, wie die Option "Neues Dokument" im Menü "Datei" ausgewählt wird, indem Sie HTML verwenden, das folgendermaßen 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 zeigt eine interessante Verschachtelung. Für die Menüoptionenbeschreibung ist die gesamte Eingabe in einem <kbd>-Element eingeschlossen. Dann sind darin sowohl die Menü- als auch die Menüpunktnamen in <kbd> und <samp> enthalten, was auf eine Eingabe hinweist, die aus einem Bildschirm-Widget ausgewählt wird.

Ergebnis

• <code>