HTML Keyboard Input -

The HTML <kbd> element is used to represent keyboard input. It is especially useful when creating tutorials, documentation, software guides, and help pages where you need to tell users which keys or keyboard shortcuts they should press.

For example, when you write Ctrl + C or Ctrl + V in an HTML tutorial, you can use the <kbd> element to identify those keys as keyboard input.

What Is the HTML `<kbd>` Element?

The <kbd> element represents input entered by a user through a keyboard or another input device.

Syntax

<kbd>keyboard key</kbd>

For example:

<p>Press <kbd>Enter</kbd> to continue.</p>

By default, browsers usually display <kbd> content in a monospace-style font. You can customize its appearance using CSS.

If you are learning HTML elements for the first time, check our guide to HTML Elements to understand how HTML elements work.

HTML Keyboard Shortcut Example

The <kbd> element is commonly used to display keyboard shortcuts.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>

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

Each key can be placed inside a separate <kbd> element. This makes the structure clear and gives browsers semantic information about the content.

Using Multiple Keyboard Keys

You can combine multiple <kbd> elements to represent a keyboard shortcut.

<p>
    Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd>
    to open Task Manager.
</p>

This approach is useful when explaining software features, operating system shortcuts, or coding tools.

Styling the `<kbd>` Element with CSS

You can use CSS to make keyboard keys look like actual buttons.

<style>
kbd {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 3px 7px;
    font-family: monospace;
    box-shadow: 0 1px 2px #999;
}
</style>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

This styling creates a visual keyboard-key effect while keeping the HTML semantically correct.

For more information about adding styles to HTML elements, see HTML Styles.

`<kbd>` vs `<code>`

The <kbd> and <code> elements are both commonly used in technical content, but they have different meanings.

The <kbd> element represents user input, usually from a keyboard.

<p>Press <kbd>Enter</kbd> to submit.</p>

The <code> element represents computer code.

<p>Use <code>console.log()</code> to display a message.</p>

For a complete explanation of displaying programming code, see HTML Code Elements.

Using `<kbd>` with Other Elements

The <kbd> element can be combined with other HTML elements to create useful instructions.

<p>
    Open the file and press <kbd>Ctrl</kbd> +
    <kbd>S</kbd> to save your changes.
</p>

You can also use it inside lists when creating shortcut guides.

<ul>
    <li><kbd>Ctrl</kbd> + <kbd>C</kbd> - Copy</li>
    <li><kbd>Ctrl</kbd> + <kbd>V</kbd> - Paste</li>
    <li><kbd>Ctrl</kbd> + <kbd>Z</kbd> - Undo</li>
</ul>

If you are unfamiliar with HTML lists, you can learn more about structuring content using HTML elements before using keyboard shortcuts.

Common Keyboard Input Examples

Here are some common keys that can be represented using <kbd>:

<kbd>Enter</kbd>
<kbd>Esc</kbd>
<kbd>Tab</kbd>
<kbd>Space</kbd>
<kbd>Shift</kbd>
<kbd>Ctrl</kbd>
<kbd>Alt</kbd>
<kbd>Backspace</kbd>

You can combine them to create shortcuts such as Ctrl + A, Ctrl + Z, Alt + Tab, and Ctrl + Shift + S.

Best Practices for HTML Keyboard Input

Use <kbd> whenever your content describes something the user needs to press or type. Keep individual keys separate when displaying keyboard shortcuts, especially when multiple keys must be pressed together.

Use CSS to improve the appearance of keyboard keys, but do not use <kbd> simply to make ordinary text look like a button. The element should be used for its semantic meaning.

Using <kbd> correctly makes technical tutorials, software instructions, and help documentation clearer and more meaningful.

What Is the HTML <kbd> Element?