HTML <Kbd> Tag

Definition

The <kbd> tag is used to define a string of text as keyboard input or keyboard press. It can be used in combination with <samp> to represent other more specific scenarios.

Example

<p>Press <kbd>Ctrl</kbd> + <kbd>q</kbd> to quit</p>

Usage

• Both the opening and closing tags are required.

• The example above shows a simple usage to denote key presses.

• While the <kbd> tag is usually used to represent keyboard input, it can be used for other things. For example, voice commands.

• You can use the <kbd> tag in a more advance way. For instance, to represent:

  • A sequence of key presses - You can embed a string of <kbd> tags in another <kbd> tag to represent a sequence of keystrokes.

    <p>Press <kbd><kbd>Ctrl</kbd> + <kbd>q</kbd></kbd> to quit</p>

  • Text that is Echoed back from a computer - You can nest a <kbd> element in a <samp> element to display echoed input. For example:

    <p>If there is an error it will be displayed by the computer:</p>
    <samp><kbd>Error: File not found.</kbd></samp>

  • Onscreen input options - You can nest a <samp> element inside a <kbd> element to represent an input based on something displayed on a screen.

    <p>To make quit press the following:
      <kbd><kbd><samp>Quit without saving.</samp></kbd> | <kbd><samp>Save and Quit.</samp></kbd></kbd>
    </p>

  NB. If you have used custom CSS to style your keyboard presses, you would need to factor in these more advanced scenarios to ensure they look as intended.

Attributes

The <kbd> element only supports the Global Attributes.

Best Practices

• The default style is font-family: monospace. You may wish to customize the default styling to make it more like a keyboard press. For example:

  kbd {
  border-radius: .25rem;
  background-color: black;
  color: white;
  padding: 0.15rem 0.4rem;
  }

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile