How to Define Keyboard Inputs in HTML

If you want to define some text as a keyboard input, in a semantically meaningful way in HTML, you can use the less-known kbd tag:

<span>
    New updates available.
    Press <kbd>ctrl</kbd>+<kbd>r</kbd> to reload.
</span>

Everything you write inside it will be displayed with the browser's default monospace font. With some help of CSS, you can enrich it to get a look similar on GitHub:

kbd {
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
    color: #b1bac4;
    background-color: #0d1117;
    border-bottom-color: #6e7681;
    border: 1px solid #6e7681;
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 #6e7681;
    vertical-align: middle;
}

This will result in the following:

Regarding support, it is well supported in the latest version of major browsers, but not in older versions.

10 Best Practices for HTMLTo help you improve your site’s performance and SEOFollowing these 10 best practices for html will help you step up your html game and get your site ranked higher, leading to more traffic...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Keyboard Input element - MDN
• Support table for the kbd tag