HTML <kbd> Tag
Das HTML <kbd>-Tag markiert Benutzereingaben von Tastatur oder Gerät. Semantik, Tastenkombinationen, Styling und Barrierefreiheit.
Das HTML-Tag <kbd> markiert Benutzereingaben — Text, den der Leser eintippen, sprechen oder auf andere Weise in ein Gerät eingeben soll. Der Name steht für „Keyboard Input" (Tastatureingabe), aber die Spezifikation verwendet es für jede vom Benutzer gelieferte Eingabe, einschließlich Sprachbefehlen und anderen Eingabemethoden, nicht nur für physische Tastenanschläge.
Diese Seite beschreibt, was <kbd> semantisch bedeutet, wie man es mit <samp> kombiniert, um spezifischere Szenarien auszudrücken, wie man Tastenkombinationen verschachtelt, wie man es so stylt, dass es wie eine echte Taste aussieht, und was es für die Barrierefreiheit bedeutet (und was nicht).
Warum <kbd> verwenden?
<kbd> ist ein semantisches Element: Es teilt dem Browser, Suchmaschinen und anderen Werkzeugen mit, dass ein Textabschnitt etwas darstellt, das der Benutzer eingibt, und nicht gewöhnlichen Fließtext. Es ist besonders nützlich in Benutzerhandbüchern, Tutorials und der Dokumentation von Tastaturkürzeln, wo Tastenkombinationen und Befehle hervorstechen sollen.
Browser rendern <kbd> standardmäßig in einer Monospace-Schrift (jedes Zeichen hat die gleiche Breite). Da dies auch der Standard für das <code>-Element ist, können beide im Ausgangszustand identisch aussehen — was ein Grund dafür ist, dass <kbd> zu wenig genutzt wird. Verwenden Sie <kbd>, wenn der Text etwas ist, das der Benutzer eingibt, und <code>, wenn es sich um Quellcode handelt. Für eine Variable oder einen Platzhalter innerhalb dieser Eingabe, siehe das <var>-Element.
Syntax
<kbd> ist ein Inline-Element, das als Tag-Paar geschrieben wird, mit dem Eingabetext dazwischen:
<p>Press <kbd>Enter</kbd> to submit the form.</p>Das schließende </kbd>-Tag ist in manchen Kontexten technisch optional, sollte aber immer gesetzt werden — es hält das Markup eindeutig und einfacher lesbar.
Grundlegendes Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>To copy the selected text, press <kbd>Ctrl</kbd> and <kbd>C</kbd>.</p>
</body>
</html>Tastenkombinationen markieren
Um eine mehrtastige Verknüpfung darzustellen, umschließen Sie die gesamte Kombination mit einem äußeren <kbd> und jede einzelne Taste mit einem eigenen verschachtelten <kbd>. Das äußere Element repräsentiert die kombinierte Eingabe als Einheit; jedes innere Element repräsentiert einen Tastendruck:
<p>
Save the document with
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>Diese Verschachtelung ist eine Konvention, keine Pflicht — ein einzelnes <kbd> pro Taste funktioniert ebenfalls — aber sie macht die Struktur eines Kürzels explizit und bietet präzise Anknüpfungspunkte, um jede Taste separat zu stylen.
<kbd> mit <samp> kombinieren
Sie können <kbd> und <samp> (Beispiel-/Systemausgabe) verschachteln, um spezifischere Bedeutungen auszudrücken, die durch die HTML-Spezifikation definiert werden:
<kbd>innerhalb von<samp>— Eingabe, die vom System an den Benutzer zurückgespiegelt wird, etwa ein im Terminal angezeigter Befehl, so wie das System ihn empfangen hat.<samp>innerhalb von<kbd>— Eingabe, die auf dem auf dem Bildschirm angezeigten Text basiert, etwa wenn der Benutzer auf einen Menüeintrag klickt, dessen Bezeichnung das System gerendert hat.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Input echoed back by the system -->
<p>The console showed <samp><kbd>npm start</kbd></samp> after I typed it.</p>
<!-- Input that comes from on-screen text -->
<p>To open the menu, choose <kbd><samp>File</samp></kbd>.</p>
</body>
</html><kbd> wie eine Taste stylen
<kbd> hat kein eingebautes Erscheinungsbild über die Monospace-Schrift hinaus, weshalb das Hinzufügen von CSS Tastenkombinationen erheblich lesbarer macht. Ein Rahmen, etwas Innenabstand und ein heller Hintergrund lassen jede Taste wie eine physische Tastenkappe aussehen. Hier behält die äußere Kombination das Standardaussehen, während jede innere Taste mit der Klasse .key gestylt wird:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
kbd.key {
padding: 2px 6px;
border-radius: 4px;
border: 1px solid #b4b4b4;
background-color: #f7f7f7;
box-shadow: 0 1px 0 #b4b4b4;
font-family: monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
<p>
Create a new document by pressing
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
</p>
</body>
</html>Das <kbd>-Tag ist nicht veraltet. Mit den CSS-Eigenschaften font-family und border lassen sich reichhaltigere Effekte erzielen, wie oben gezeigt.
Barrierefreiheit
<kbd> hat keine besondere Semantik für assistive Technologien — Screenreader kündigen es nicht als „Tastatureingabe" an und es vermittelt keine Rolle oder keinen Zustand. Es ist ein präsentativer und semantischer Hinweis für sehende Leser und Maschinen, kein zugängliches Label.
Verlassen Sie sich daher niemals allein auf <kbd>, um Bedeutung zu vermitteln. Wenn eine Tastenkombination von allen verstanden werden soll, buchstabieren Sie sie im umgebenden Text aus (zum Beispiel „Drücken Sie Strg plus C zum Kopieren"), anstatt sich auf die gestalteten Tastenvisuals zu stützen.
Attribute
Das <kbd>-Tag unterstützt die Global Attributes und die Event Attributes.
Verwandte Tags
<code>— ein Fragment von Computercode.<samp>— Beispiel- oder Systemausgabe.<var>— eine Variable oder ein Platzhalter in Code oder Eingabe.