HTML <kbd>

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

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

  • 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

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

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