Growing with the Web: The kbd element

The kbd HTML element is used to represent some form of user input. Typically it represents keyboard input (where its name comes from) but can be used to represent any type of input that can be represented in text, such as voice commands. While it may not be familiar to most web developers it has actually been part of HTML since the first proposal for a specification (HTML1 was 1993!), though the meaning has changed quite a bit since then.

Usage

There are a few different ways to use it as defined by the HTML5 spec.

Keystrokes

The kbd element by itself generally represents a keystroke.

<p>Press the <kbd>Space</kbd> key to continue.</p>

When chaining keys together, ideally you would nest each keystroke within their own kbd element.

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

Voice commands

Voice commands can be represented in the same fashion as keystrokes; by wrapping the command in the kbd tag.

<p>Say <kbd>OK Google</kbd> followed by your command.</p>

Input based on system output

The ideal way to represent input that is based on system output, such as a menu item, is to wrap the whole command in a kbd, each individual command in a kbd and each individual command again in a samp element.

<p>To save, select <kbd><kbd><samp>File</samp></kbd> | <kbd><samp>Save</samp></kbd></kbd>.</p>

This really does seem overkill and the spec actually says that such precision isn't necessary and simply wrapping the entire command in a single kbd is equally fine.

<p>To save, select <kbd>File | Save</kbd>.</p>

Input as it was echoed by the system

The prime example of this would be a program's output telling the user what to input, like a help message for a command line program or an instructional dialog in a GUI program. The ideal way to represent such a message is to wrap the entire output in a samp element and the inner-input commands in kbd tags.

<p>The program should remind you:</p>

<samp>Don't forget to frequently save your progress by hitting <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></samp>

Styling

A website that consistently uses the kbd elements enables the use of some clever styles that better represent the input. The styles that are used on this site for example:

kbd > kbd {
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 0 0 3px #eee inset;
  border-radius: 3px;
  padding: .1em .7em;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  background-color: #eee;
  display: inline-block;
  margin: 0 .1em;
  white-space: nowrap;
  font-size: .7em;
}

Here it is in action:

See the Pen The <kbd> element by Daniel Imms (@Tyriar) on CodePen

Wrap-up

Remember that the kbd element is a text-level semantic element and following exactly to the recommendation may not be necessary depending on the situation. As mentioned above, the HTML5 spec explicitly mentions that such precision isn't necessary. The spec outlines the most semantic way to markup the input, simply wrapping the items in a kbd tag is probably sufficient to get the point across clearly in most cases.

Growing with the Web

The kbd element