An Intro to HTML <kbd> Tag
![](https://d33wubrfki0l68.cloudfront.net/6750c90761dee851f9e1c7816a3ada9ce55427b3/f9953/an-intro-to-html-kbd-tag/featured_hu3cbf443dbfee6cb8f5386ac0bce1bd6f_8750_720x2500_fit_q75_h2_lanczos_3.webp)
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 🇮🇳