References

Beginner-friendly references for web development, with live, editable examples.

The HTML <kbd> tag

Element All modern browsers Updated
Quick answer

The HTML <kbd> element represents user input — keystrokes, key combinations, or voice commands — typically shown in a monospace font. Use it for keys and shortcuts like Ctrl+S.

Overview

The <kbd> element marks text that the user types or the keys they press — an input instruction like "type yes" or a keyboard shortcut. Browsers render it in a monospace font.

You can nest it to represent key combinations: wrapping each key in its own <kbd> inside an outer one, as in a shortcut built from <kbd>Ctrl</kbd>+<kbd>S</kbd>. Many sites style it with CSS to look like physical keycaps.

It belongs to a trio of input/output elements: <kbd> for what the user types, <samp> for what the program outputs, and <code> for source code. Choosing the right one keeps the meaning of technical text clear.

Syntax

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

Example

Live example 
<p>Copy with <kbd>Ctrl</kbd>+<kbd>C</kbd> and paste with <kbd>Ctrl</kbd>+<kbd>V</kbd>.</p>

Best practices

  • Use <kbd> for keys the user presses and text they type.
  • Nest individual <kbd> elements to represent a key combination.
  • Style it like a keycap with CSS (border, background, padding) for clarity.
  • Keep it distinct from <samp> (program output) and <code> (source code).

Frequently asked questions

What is the kbd element for?
To mark user input from the keyboard — keys pressed or text typed, such as a keyboard shortcut.
How do I show a keyboard shortcut like Ctrl+S?
Wrap each key in its own <kbd>, e.g. <kbd>Ctrl</kbd>+<kbd>S</kbd>, optionally inside an outer <kbd>.
What is the difference between kbd and code?
<kbd> is what the user types or presses; <code> is source code. <samp> is program output.
How do I make kbd look like a keycap?
Style it with CSS — a border, light background, small padding and border-radius give the keycap look.
ins label