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 🇮🇳
Related Articles
Deepen your understanding with these curated continuations.
HTML address Tag Guide: Semantic Contact Information
Learn how to use the HTML <address> tag correctly for contact information. Discover best practices for accessibility, SEO, and semantic web structure.
How to create collapsible content using HTML5 details tag
How to create collapsible content using HTML5 details tag
How to Create Links in Markdown: A Step-by-Step Guide
Learn how to create internal and external links in Markdown. Master the syntax for anchor text, URLs, titles, and automatic email links for better navigation.
