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
Horizontal Rules & Line Breaks in Markdown
Master horizontal rules and line breaks in Markdown. Learn how to separate sections with ---, ***, or ___ and when to use trailing spaces vs blank lines.
