A tutorial explains how to save a document and writes: press Ctrl and S at the same time. The reader has to spot straight away which keys to press, without confusing them with the rest of the sentence or with a code snippet shown right above.
The <kbd> tag exists for exactly this case: it marks a passage as keyboard input expected from the user, a single key or a combination, and sets it apart from narrative text as well as from code shown on screen.
Definition
The <kbd> tag wraps text that represents keyboard input: the key or the key combination the user must press to get a result. It never describes a button to click with a mouse or a tap gesture, only what goes through a keyboard, physical or virtual.
By default most browsers render it in a fixed-width font, sometimes with a light border, so a key stands out at a glance in the middle of a sentence. That style stays fully editable in CSS; what matters is the meaning the tag carries, not its appearance.
Representing a key combination
A single key is written with one tag, for example <kbd>Enter</kbd>. A combination like Ctrl+S is built by nesting one <kbd> inside another: the outer tag represents the whole combination, each inner tag represents one key taken on its own.
<p>
Save the file with <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd
>.
</p>The plus sign between the two keys is nothing automatic: the browser does not add it on its own, it is plain text typed by hand between the two nested <kbd> tags so the combination stays readable on the page.
Difference with code and samp
Three tags look alike on screen, all rendered in a fixed-width font by default, and only differ by what they represent. <code> shows a fragment of source code, <samp> shows what a program prints as output, <kbd> shows what the user must type themselves. The table sums up the distinction with one example for each.
| Tag | What it represents | Example |
|---|---|---|
| <kbd> | Keyboard input expected from the user | Press <kbd>Enter</kbd> |
| <code> | A fragment of source code | The variable <code>total</code> is 0 |
| <samp> | Output produced by a program | The terminal shows <samp>File not found</samp> |
A common mix-up is quoting a command to type in a terminal with code rather than with <kbd>. Code represents something that already exists somewhere, a file or a library, while <kbd> represents an action the reader has to perform themselves, right now, on their own keyboard.
Semantics and accessibility
<kbd> adds no particular voice announcement in most screen readers, yet its value stays real: separating the instruction clearly from the rest of the text helps anyone scanning documentation quickly, including with an in-page search tool. Someone driving their computer by voice or through an alternative keyboard-access device also benefits from an exact key name kept apart, rather than buried inside a sentence.
A common trap is using <kbd> to style an interface button, such as Submit or Cancel, simply because its default look, a monospace box, resembles a button. <kbd> never describes a mouse click or a visual control: keep it strictly for what gets pressed on a keyboard. For an interface button, the right tag stays <button>.
Common use cases
<kbd> shows up mostly in technical documentation, tutorials, keyboard shortcut lists for an application, or help messages explaining how to interact with a form.
In an online course, it is particularly useful: it states without ambiguity which key to press during a hands-on exercise, sparing the reader from guessing whether a word is part of the explanation or the instruction itself to carry out.
Frequently asked questions
Should <kbd> be used for an on-screen button, like Submit?
No. <kbd> only represents a keyboard key to press, never a button clickable with a mouse or a touch control. An interface button is written with the <button> tag, which carries its own meaning for assistive technology. Keeping <kbd> for the keyboard avoids blurring that distinction for screen reader users.
How do you write a three-key shortcut, like Ctrl+Shift+S?
By nesting one <kbd> per key inside an outer <kbd> that represents the full combination, separated by plus signs typed by hand. The structure stays the same as with two keys, it just extends one extra level of nested tags, with no limit set by the specification.
Does the default style of <kbd> work as is on a site?
The default look, a fixed-width font and a light border, varies from browser to browser and rarely suffices for a polished visual identity. Nothing stops customising it in CSS, with a light grey background, rounded corners or a subtle shadow. What must never change is the meaning of the tag, reserved for the keyboard.