kbd

The HTML <kbd> element marks user input, especially keyboard keys and shortcuts. It tells readers that the text describes an action they should perform.

What you will learn

What kind of user input kbd represents
How to write a single key or a keyboard shortcut
How it differs from samp and code

Basic example

<p>Press <kbd>Enter</kbd> to submit the form.</p>

The text inside kbd is the key or input the user should provide. Choose a label that matches the wording on the user’s keyboard or the instructions in your interface.

Keyboard shortcuts

<p>Save your work with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>On macOS, use <kbd>⌘ Command</kbd> + <kbd>S</kbd>.</p>

Wrap each key separately when the combination has several keys. If the shortcut differs by platform, document both forms or describe the platform-specific modifier.

kbd, code, and samp are different

kbd: Input the user should type or press.
code: A fragment of a computer program or code-like text.
samp: Sample output from a computer program or system.

<p>Type <kbd>npm run build</kbd>.</p>
<p>The command prints <samp>Build complete</samp>.</p>
<p>The function is written as <code>build()</code>.</p>

Accessibility notes

Do not rely only on the browser’s default styling. Make the instruction understandable in text, support keyboard users in the actual interface, and avoid shortcuts that interfere with browser or assistive-technology commands.

Common mistakes

Using kbd for program output instead of samp.
Writing a shortcut only for one operating system when the site supports several.
Assuming a visual keycap style makes an interface keyboard-accessible.
Using it for every code sample just because the text appears in a monospace font.