<kbd>
Input entered by the user: keys, keyboard shortcuts, and commands to type.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Save the file with <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>, or on a Mac <kbd><kbd>Cmd</kbd> + <kbd>S</kbd></kbd>.</p>
<p>Install the dependencies: type <kbd>npm install</kbd> in the terminal and press <kbd>Enter</kbd>.</p>Definition and usage
#The <kbd> element marks what the user enters: a single key, a keyboard shortcut, text to type, or even a voice command. Browsers display it in a monospace font.
Keyboard shortcuts are written by nesting: the outer <kbd> wraps the whole combination, and the inner ones mark the individual keys, e.g. <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.
Together with <samp>, it forms a pair describing a conversation with the computer: <kbd> is your command, and <samp> is the program’s response. <code>, meanwhile, marks source code.
By default, <kbd> looks like plain monospace text. You give it the look of a key, with a border and a shadow, in CSS.
Syntax
#<kbd>Enter</kbd>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>
Close the hint window with the
<kbd style="padding: 2px 8px; border: 1px solid #64748b; border-bottom-width: 3px; border-radius: 6px;">Esc</kbd> key.
</p>Default CSS
#Most browsers display this element with these default styles:
kbd {
font-family: monospace;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write shortcuts as nested
<kbd>elements: one for the whole shortcut and one for each key. - Give the Windows and macOS variants if they differ.
- Write key names the way they appear on the keyboard, e.g. Enter, Shift, or Esc.
Related entries
#- <code>A piece of computer code: the name of a variable, function, tag, or file, as well as a short listing.
- <samp>Sample output from a program: a message, a console response, or error text.
- <var>A variable in a math formula or a program, as well as a placeholder symbol in a command.
- <pre>Preformatted text: it preserves spaces, tabs, and line breaks exactly as they appear in the code.
Spotted a mistake or missing an example? Write to us.