HTML-Tag <kbd>

❮ Vorige Nächste ❯

Das Tag <kbd> bestimmt den Namen der Taste oder den an der Tastatur eingegebenen Text. Der Inhalt des Tages wird im Browser durch nichtproportionale Schriftart (alle Zeichen haben die gleiche Breite) angezeigt.

Syntax

Das Tag <kbd> wird gepaart verwendet, kein Endtag (</kbd>) ist obligatorisch.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p>Um das Dokument zu speichern, verwenden Sie die Tastenkombination <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>. 
   </body>
</html>

Versuch es selber!

Ergebnis

Das Tag <kbd> ist noch nicht veraltet, aber es ist möglich, mit den CSS-Eigenschaften font-family oder border reichere Effekte zu erzielen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Speichern Sie das Dokument mit <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
    <p>Erstellen Sie ein neues Dokument mit <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
    </p>
  </body>
</html>