HTML <kbd> element

The <kbd> element represents user input. Most often this means keyboard input, such as a key, shortcut, command, or sequence the user is meant to type. It can also represent other input, such as a voice command.

In an instruction such as Press Enter, the key name belongs inside <kbd>, while the surrounding instruction remains ordinary text. The element describes the input; it does not create a working button or register a keyboard shortcut.

The element can mark a single key, such as Esc, or a longer input, such as Ctrl + S or git status. For a key combination, an outer <kbd> can group the whole input, with a nested <kbd> around each individual key. The example below uses this structure for Ctrl + S.

This makes <kbd> different from <samp>. The <kbd> element marks what the user enters. The <samp> element marks what the system outputs. In a command-line example, both may appear close together, but they are not doing the same job.

It also differs from <code>. A typed command may be both code-like and user input, but the reason for marking it with <kbd> is that the reader is being asked to enter it.

Browsers usually display <kbd> in a monospace font. Borders or backgrounds that make the text resemble a physical key must be added with CSS.

Attributes: GLOBALS.

Typical layout:
<p>
  Press <kbd>
    <kbd>Ctrl</kbd> +
    <kbd>S</kbd>
  </kbd>
  to save.
</p>

Visual representation: