HTML <kbd> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>

Press Ctrl + q to quit

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;
    }

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes