What’s the Use of the <kbd> tag in HTML? How to Style it Using CSS?

The <kbd> tag in HTML is rarely used by most programmers and web developers because it doesn’t do much apart from displaying the text contained inside of it in the monospace font. Most browsers would always display the text contained in this tag using the system default monospace font.

The html.com website defines the <kbd> tag as following,

The <kbd> element is used to identify text that represents user keyboard input. Text surrounded by <kbd> tags is typically displayed in the browser’s default monospace font.

So essentially, it is more or less like the <code> and <span> tag which can also be styled using CSS. You can use the <kbd> tag to represent user input, for example, instead of just writing Windows + L in plain text, you can style it using the <kbd> tag to look like this,

Windows + L

This is useful when you are writing a tutorial, or designing a web page which contains technical documentation. You can use a little bit of css to style it, change its default monospace font, add a border around it.

Also, <kbd> tag is supported universally and would be displayed in all major browsers including on smartphones devices.

Here we have given the CSS code for styling the <kbd> tag in different ways, simply add the desired css code to your website’s CSS file. Then add the text inside the <kbd></kbd> tag to display it like a rectangular chiclet key on your keyboard.