HTML `<kbd>`-Tag

Das <kbd>-Tag definiert eine Tastatureingabe. Es wird verwendet, wenn ein Text angezeigt werden soll, den der Benutzer über die Tastatur eingeben soll (aus verschiedenen Gründen). Dieses Element wird oft unterschätzt, ist aber sehr nützlich für die Erstellung jeglicher Art von Benutzerdokumentation.

Im Browser wird der Inhalt des Tags in einer Monospace-Schriftart dargestellt (alle Zeichen haben die gleiche Breite). Einer der Gründe, warum <kbd> unterschätzt wird, ist, dass eine Monospace-Schriftart der Standardstil ist, was es ununterscheidbar von einem <code>-Element macht. Durch das Hinzufügen von Styles zu <kbd>-Elementen können sie jedoch aussagekräftiger und hilfreicher gestaltet werden.

Sie können andere Elemente zusammen mit <kbd> verwenden, um zusätzliche Spezifität hinzuzufügen:

Wenn Sie ein <kbd>-Element in ein anderes <kbd>-Element einfügen, wird eine Eingabeeinheit als Teil einer größeren Einheit dargestellt.
Wenn Sie ein <kbd>-Element in ein <samp>-Element einfügen, wird eine Eingabe dargestellt, die vom System an den Benutzer zurückgegeben wird.
Wenn Sie ein <samp>-Element in ein <kbd>-Element einfügen, wird eine Eingabe dargestellt, die auf einem vom System angezeigten Text basiert.

Syntax

Das <kbd>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<kbd>) und dem schließenden (</kbd>) Tag geschrieben. Das schließende Tag (</kbd>) ist jedoch nicht zwingend erforderlich.

Beispiel für das HTML `<kbd>`-Tag:

Die Tastenkombination zum Speichern des Dokuments|Beispiel für das HTML <kbd>-Tag|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Use the combination of these keys to save the document
      <kbd>
        <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>
    </p>
  </body>
</html>

Try it Yourself »

Ergebnis

kbd tag example

Erfolg
Das <kbd>-Tag ist noch nicht veraltet, aber mit CSS-Eigenschaften wie font-family oder border lassen sich ansprechendere Effekte erzielen.

Beispiel für das HTML `<kbd>`-Tag in Kombination mit CSS-Eigenschaften:

Die Tastenkombination zum Erstellen eines neuen Dokuments|Beispiel für das HTML <kbd>-Tag|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 1px 2px 0;
        border-radius: 3px;
        border: 1px solid #666;
        border-color: #990000;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>
      Save the document by pressing
      <kbd>
         <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>.
    </p>
    <p>
      Create a new document by pressing
      <kbd>
         <kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd>
      </kbd>.
    </p>
  </body>
</html>

Try it Yourself »

Attribute

Das <kbd>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <kbd>-Tag

json

{
    "tag_name": "kbd"
}

Praxis

Was ist der Zweck und die Verwendung des HTML `<kbd>`-Tags?

Es wird verwendet, um eine Benutzereingabe zu definieren.Es wird zum Einfügen von Bildern in eine Webseite verwendet.Es wird normalerweise in der Standardschriftart des Browsers (Monospace) angezeigt.Es wird zur Formatierung von kursivem Text verwendet.Es wird verwendet, um einen Textbereich zu definieren, der vom Benutzer eingegeben werden soll.Es wird zum Erstellen von Hyperlinks verwendet.

HTML <kbd>-Tag ​

Syntax ​

Beispiel für das HTML <kbd>-Tag: ​

Ergebnis ​

Beispiel für das HTML <kbd>-Tag in Kombination mit CSS-Eigenschaften: ​

Attribute ​