Definition and Usage

The <kbd> tag represents user text input entered via input devices (not only keyboards, but also voice commands, mouse clicks, and other input methods).

The <kbd> tag, derived from the word keyboard, is primarily used to indicate which keys the user should press on a keyboard.

Basic Example

The <kbd> tag is used to represent keys that the user needs to press.

HTML 
<p>
    To copy on Windows,
    press <kbd>Ctrl</kbd> + <kbd>C</kbd>.
</p>
<p>
    To copy on macOS,
    press <kbd>Cmd</kbd> + <kbd>C</kbd>.
</p>
Rendered Output

The <kbd> tag is typically displayed in a fixed-width (monospace) font by default in most browsers. However, you can enhance its visual appearance and emphasize its meaning more clearly by adding some CSS styling.

CSS 
kbd {
    color: #222;
    font-size: 0.8em;
    vertical-align: text-top;
    padding: 0.09em 0.7em;
    background-color: #e6e6e6;
    border-radius: 0.3em;
    box-shadow: 0 1px 1px #666;
}
Rendered Output with CSS applied

As shown in the example above, adding custom styles helps make the purpose of the <kbd> tag visually clearer.

Usage Notes

Meaning of Nesting <kbd> Tags

When a <kbd> tag is nested inside another <kbd> tag, the outer <kbd> tag represents the entire input block, while the inner <kbd> tags indicate each individual key input. This approach provides a more detailed way to mark up keyboard input.

HTML 
<!--
<p>
    To copy on Windows,
    press <kbd>Ctrl</kbd> + <kbd>C</kbd>.
</p>
-->

<!-- A more precise markup version of the code above -->
<p>
    To copy on Windows,
    press <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>.
</p>

You don't necessarily have to use nested <kbd> tags.
The example above simply demonstrates that nesting <kbd> tags is a valid and semantically acceptable markup pattern.

Meaning of Using the <samp> Tag Inside <kbd>

While the <kbd> tag is typically used to represent the keys pressed by the user, you can use a <samp> tag inside a <kbd> tag to show sample input corresponding to a system's response or output.

The <samp> tag represents sample output or quoted output from another program or computing system.

HTML 
<p>
    To open a file, select 
    <kbd>
        <kbd><samp>File</samp></kbd> ⇒ <kbd><samp>Open</samp></kbd>
    </kbd>
    from the menu.
</p>
<p>
    To save a file, select 
    <kbd>
        <kbd><samp>File</samp></kbd> ⇒ <kbd><samp>Save</samp></kbd>
    </kbd>
    from the menu.
</p>

As shown in the examples above, the <kbd> tag can be used not only for keyboard input but also to represent various types of user input such as voice commands or mouse clicks.

Although this type of detailed markup is possible, it is not required. The following simplified example is equally valid and acceptable:

HTML 
<p>
    To open a file, select
    <kbd>File</kbd> ⇒ <kbd>Open</kbd> from the menu.
</p>
<p>
    To save a file, select
    <kbd>File</kbd> ⇒ <kbd>Save</kbd> from the menu.
</p>

Technical Syntax Summary

Technical Syntax Summary of the <kbd> tag
Permitted parents Any element that accepts phrasing content.
Permitted content Phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any

Browser compatibility

Browser compatibility for the kbd tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<kbd> 1 12 1 4

Specifications

Specification for the kbd tag
Specification
<kbd> HTML Standard
#the-kbd-element

References

See also