An Intro to HTML <kbd> Tag

The <kbd> is an inline HTML element that defines keyboard input. By default it’s rendered with default monospace font.

With HTML, a reset button can be added in a form with <input /> tag. For that, we need to specify an attribute type with "reset" value as type="reset"

This tag is semantic solution to display keyboard inputs.

Example

<kbd>Alt</kbd>

Output

Alt

Applying CSS

kbd {
  padding: 0.2rem 0.4rem;
  color: #ffffff;
  background-color: #007bff;
  border-radius: 0.2rem;
}

Output

Press Ctrl + C to copy

It will be really helpful for documentation purposes. I have been using <code> tag till now. Will strongly adhere to this after encountering this semantic solution.

Dos

To paste copied item without formatting, the keyboard shortcut you can use:

<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>v</kbd>

Don’ts

To paste copied item without formatting, the keyboard shortcut you can use:

<code>Ctrl</code> + <code>Shift</code> + <code>v</code>

<code>: Text indicating fragment of a computer code.

Hope you like this

Happy 😄 coding

With ❤️ from 🇮🇳