<kbd> represents user input, often a key, typed command, or an instruction based on a visible interface. It is semantic text markup; it does not register a shortcut or become a button.
Describe a key sequence
The outer kbd groups the input sequence and inner kbd elements mark individual keys. The text tells readers what to do.
HTML and CSS
HTML
<p>Move to the next control with <kbd>Tab</kbd>.</p>
<p>
Move backward with <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd
>.
</p>CSS
kbd {
font-family: ui-monospace, monospace;
}
kbd kbd {
border: 1px solid #94a3b8;
border-radius: 0.2rem;
padding: 0.1rem 0.3rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Content and behavior
Kbd accepts phrasing content and global attributes. Browser defaults usually use a monospace font. CSS can make key labels look like keys without changing their input meaning.
Use samp for output and code for program source. Kbd inside samp can represent echoed input; samp inside kbd can identify an interface label used as input.
Practical guidance
Name the relevant platform when shortcuts differ, and avoid relying on symbols unfamiliar to the reader. Written instructions do not make a custom interaction accessible; the actual control must support its intended keyboard behavior. Use a button for an actionable control rather than a clickable kbd label.
Sources and browser support
MDN: kbd describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.