HTML <kbd> Element
The HTML <kbd> element represents user input, typically from a keyboard, although it can also describe input from other devices such as voice commands or menu selections. It is commonly used in instructions that tell users which keys or controls to use.
Syntax
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>The <kbd> element requires both an opening and closing tag. The content between the tags identifies the input a user should provide.
Attributes
The <kbd> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <kbd> element to identify the keyboard keys a user should press to save a file.
Usage Notes
Use the <kbd> element when instructions refer to input that a user should enter or activate, especially keyboard keys and keyboard shortcuts.
Browsers usually display <kbd> content in a monospace font by default, but its semantic meaning is user input rather than a particular visual style.
For keyboard shortcuts that use several keys together, each key can be placed in its own <kbd> element, such as <kbd>Ctrl</kbd> + <kbd>S</kbd>.
The <kbd> element can also represent input that does not come directly from a physical keyboard, such as selecting a menu command or providing a voice command, when that content represents something the user is expected to input.
Use <samp> for output produced by a computer program and <code> for fragments of computer code rather than user input.
Accessibility
Make keyboard instructions clear enough that users can understand whether keys should be pressed together or in sequence. Symbols such as a plus sign can help communicate that multiple keys are pressed at the same time.
Do not rely only on special font styling to distinguish keyboard input. The surrounding text should clearly explain what action the user is expected to perform.
When documenting keyboard shortcuts, consider differences between operating systems when the same action uses different keys, such as Ctrl on Windows and Command on macOS.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <kbd> Element .
Related Elements
<code> - Represents a fragment of computer code.
<samp> - Represents sample or quoted output from a computer program.
<var> - Represents a variable in mathematics, programming, or technical content.
<pre> - Represents preformatted text in which whitespace is preserved.