0%

<kbd> Keyboard input

Keys or text the user should press or type.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<kbd> marks user input, usually keyboard keys or a command to type. Browsers use a monospace font.

Key combinations use nesting: one kbd per key, all inside an outer kbd. If you want them to look like keycaps, CSS can do that. Output from a program is not input, so it gets <samp>.

The kbd element definition (opens in a new tab) shows how to nest kbd elements for key combinations. For program output, compare it with samp.

Syntax

<kbd>Key</kbd>

When to use it

<kbd> marks anything the user enters: keyboard shortcuts in a help page, a command to type into a terminal, a code to enter into a search box, or even a phrase to say to a voice assistant, since the standard counts voice input too.

When the user picks something shown on screen, such as a menu item, the standard nests samp inside kbd: the menu text is output from the program, and choosing it is input. For keys that are part of code being explained, stay with code.

Plenty of help pages write shortcuts for one system only. Ctrl+C on Windows is Command+C on a Mac, so give both, for example "Ctrl+C (or Command+C on a Mac)". Write key names as words instead of icons alone, and if you style kbd like a keycap with a border and shadow, keep enough contrast for the text inside.

Live example

Edit the code and watch the preview.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> to save.</p>
<p>Type <kbd>yes</kbd> and press <kbd>Enter</kbd>.</p>

More examples

Keycap styling

Inline styles give kbd elements a keycap look with a border and rounded corners. The shortcut is shown for both Windows and Mac, so every reader finds the keys they have.

<p>Copy: <kbd style="border:1px solid #999;border-bottom-width:3px;border-radius:4px;padding:1px 6px;background:#fafafa">Ctrl</kbd> + <kbd style="border:1px solid #999;border-bottom-width:3px;border-radius:4px;padding:1px 6px;background:#fafafa">C</kbd></p>
<p>On a Mac: <kbd style="border:1px solid #999;border-bottom-width:3px;border-radius:4px;padding:1px 6px;background:#fafafa">Command</kbd> + <kbd style="border:1px solid #999;border-bottom-width:3px;border-radius:4px;padding:1px 6px;background:#fafafa">C</kbd></p>

Choosing a menu item

Selecting a menu item is input, but the menu labels are text the program shows. Following the pattern in the HTML standard, samp elements for the labels sit inside an outer kbd.

<p>To save a copy, choose <kbd><kbd><samp>File</samp></kbd> &gt; <kbd><samp>Save As</samp></kbd></kbd> and type a new name.</p>

Tip: For a key combination, nest kbd elements.

Browser support

kbd goes back to HTML 2.0, and every browser shows it in a monospace font. Nesting kbd and samp is described in the HTML Living Standard and needs no special browser support; any keycap look comes from your CSS.

Accessibility

Spell key names out in words screen readers pronounce well, such as Ctrl or Command, instead of using symbols alone. Sites with single-key shortcuts should follow the W3C note Understanding Character Key Shortcuts (opens in a new tab).

Common mistakes

Wrong

Press <code>Ctrl+S</code> to save.

Right

Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.

A key the user presses is keyboard input. That is kbd.

Frequently asked questions

How do I show keyboard shortcuts in HTML?

Put each key in <kbd>, and wrap the whole combination in an outer kbd if you like: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>. The default is a monospace font. Borders and rounded corners on the inner keys make them look like keycaps. Common combinations are listed in Wikipedia's article on keyboard shortcuts (opens in a new tab).

What is the difference between kbd and samp?

Direction. <kbd> is input the user enters, usually by keyboard but also by voice or other means. <samp> is output from a program, such as an error message. Nest <samp> inside <kbd> and you have input the system echoed back, like a menu option the user picks.

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.