MDN Web Docs

<kbd>: The Keyboard Input element

Reference

The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

<kbd> may be nested in various combinations with the <samp> (Sample Output) element to represent various forms of input or input based on visual cues.

Attributes

This element only supports the global attributes.

Usage notes

Other elements can be used in tandem with <kbd> to represent more specific scenarios:

  • Nesting a <kbd> element within another <kbd> element represents an actual key or other unit of input as a portion of a larger input.
  • Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.
  • Nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

You can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your CSS.

Examples

Basic example

HTML

<p>Use the command <kbd>help mycommand</kbd> to view documentation
for the command "mycommand".</p>

Result

Representing keystrokes within an input

To describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.

HTML

<p>You can also create a new document by pressing <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.</p>

CSS

kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

Result

Echoed input

Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

HTML

<p>If a syntax error occurs, the tool will output the initial
command you typed for your review:</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

Result

Onscreen input

Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using the HTML below.

This does some interesting nesting. For the menu option description, the entire input is enclosed in a <kbd> element. Then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.

Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside <kbd>, but by also wrapping each key in its own <kbd> element.

You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. In other words, simplifying this to just <kbd>Ctrl</kbd>+<kbd>N</kbd> would be perfectly valid.

Depending on your style sheet , though, you may find it useful to do this kind of nesting.

HTML

<p>To create a new file, choose the menu option
<kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New
Document</samp></kbd></kbd>.</p>

<p>Don't forget to click the <kbd><samp>OK</samp></kbd> button
to confirm once you've entered the name of the new file.</p>

Result

DesktopMobile
ChromeEdgeChromeEdge
video3Yes?No

See also