<kbd>

BrandonDusch's avatar
BrandonDusch's avatar
BrandonDusch
Published Mar 21, 2022Updated Jul 1, 2022
Contribute to Docs

The <kbd> element emphasizes characters to look like keys on a keyboard.

Syntax

The <kbd> element has no attributes. Text is placed in between the opening and closing <kbd> tags and will render in the browser’s default monospace font. <kbd> can be nested but the result will be the same.

<kbd><!-- Text goes here --></kbd>

Example 1

Leaving out an external <kbd> wrapper element is value and will have no effect.

<p>You can copy text by pressing <kbd>CTRL</kbd>+<kbd>C</kbd>.</p>

Keyboard Tag Example 1

Example 2

However, nested <kbd> elements may be useful for certain stylesheet setups.

<!-- prettier-ignore -->
<p>You can paste text by pressing <kbd><kbd>CTRL</kbd>+<kbd>V</kbd></kbd>.</p>

Keyboard Tag Example 2

All contributors

Contribute to Docs

Learn HTML on Codecademy

Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification
Beginner Friendly
115 hours
Free course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
Beginner Friendly
7 hours