<kbd>: HTML-Element für Tastatureingaben

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

Attribute

Dieses Element unterstützt nur die globalen Attribute.

Verwendungshinweise

Zusammen mit <kbd> können andere Elemente verwendet werden, um spezifischere Fälle darzustellen:

• Ein <kbd>-Element innerhalb eines weiteren <kbd>-Elements stellt eine einzelne Taste oder eine andere Eingabeeinheit als Teil einer größeren Eingabe dar. Siehe Tastendrücke innerhalb einer Eingabe darstellen.
• Ein <kbd>-Element innerhalb eines <samp>-Elements stellt eine Eingabe dar, die das System für den Benutzer wiederholt hat. Ein Beispiel finden Sie unter Wiedergegebene Eingabe.
• Ein <samp>-Element innerhalb eines <kbd>-Elements stellt dagegen eine Eingabe dar, die auf vom System angezeigtem Text beruht, etwa auf Namen von Menüs und Menüeinträgen oder auf Beschriftungen von Schaltflächen. Ein Beispiel finden Sie unter Eingabeoptionen auf dem Bildschirm darstellen.

Beispiele

Einfaches Beispiel

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

Ergebnis

Tastendrücke innerhalb einer Eingabe darstellen

Um eine Eingabe aus mehreren Tastendrücken zu beschreiben, können Sie mehrere <kbd>-Elemente verschachteln: Ein äußeres <kbd>-Element stellt die gesamte Eingabe dar, während jeder einzelne Tastendruck oder Bestandteil der Eingabe in einem eigenen <kbd>-Element steht.

Ohne eigene Formatierung

Sehen wir uns zunächst an, wie dies mit 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>

Dabei wird die gesamte Tastenfolge in ein äußeres <kbd>-Element eingeschlossen und jede einzelne Taste zusätzlich in ein eigenes, um die Bestandteile der Folge zu kennzeichnen.

Ergebnis

Ohne angewendetes Stylesheet sieht die Ausgabe so aus:

Mit eigenen Stilen

Mit etwas CSS lässt sich die Darstellung deutlicher gestalten.

HTML

Wir verschachteln <kbd>-Elemente, um die einzelnen Tasten des Tastenkürzels auszuzeichnen:

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

CSS

Wir fügen einen Selektor für verschachtelte <kbd>-Elemente hinzu: kbd>kbd. Damit können wir die Darstellung einzelner Tasten gestalten:

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

Ergebnis

Das Ergebnis entspricht nun der gewünschten Darstellung:

Wiedergegebene Eingabe

Ein <kbd>-Element innerhalb eines <samp>-Elements stellt eine Eingabe dar, die das System für den Benutzer wiederholt hat.

<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

Eingabeoptionen auf dem Bildschirm darstellen

Ein <samp>-Element innerhalb eines <kbd>-Elements stellt eine Eingabe dar, die auf vom System angezeigtem Text beruht, etwa auf Namen von Menüs und Menüeinträgen oder auf Beschriftungen von Schaltflächen.

Beispielsweise können Sie mit folgendem HTML beschreiben, wie die Option „Neues Dokument“ im Menü „Datei“ ausgewä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>

Hier werden die Elemente auf interessante Weise verschachtelt: Die gesamte Eingabe für die Menüauswahl steht in einem <kbd>-Element. Darin stehen sowohl der Menüname als auch der Name des Menüeintrags jeweils in einem <kbd>- und einem <samp>-Element. Das kennzeichnet eine Eingabe, die über ein Bedienelement auf dem Bildschirm ausgewählt wird.

Ergebnis

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <code>