HTML <kbd> Tag

The <kbd> tag defines a keyboard input. The tag is used when it is needed to display text that the user should enter into their keyboard (for any number of reasons).

The content of the tag in the browser is displayed in monospaced font (all characters have the same width).

Syntax

The <kbd> tag comes in pairs, the closing tag (</kbd>) isn’t required.

Example

<!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>

Result

The <kbd> tag is not deprecated yet, but it is possible to achieve richer effects using CSS font-family, or border properties.

Example

<!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>

Result

Attributes

The <kbd> tag supports the Global Attributes and the Event Attributes.

Browser support