<kbd> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <kbd> HTML Tag do?
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.
Display
inline
Usage
textual

Code Example

<p>Three keys you really need to familiarize yourself with are <kbd>CTRL</kbd>, <kbd>ALT</kbd> and <kbd>DEL</kbd>.</p>

Three keys you really need to familiarize yourself with are CTRL, ALT and DEL.

Great for documentation

The <kbd> element indicates text that should be typed on a keyboard. This is a fantastic, and underused, element that can be really helpful if you have to write any sort of user documentation. Part of the reason that the <kbd> element is underused is that the default style is simply a monospace font, which makes it indistinguishable from a <code> element. But with a little bit of styling, you can make your <kbd> elements much more helpful and communicative.

kbd {  border: 1px solid #666666;  border-radius: 4px;  padding: 3px 5px;  margin: 2px;  color: #444444;  text-decoration: none; } 
To search within a document, most browsers will open a Find tool if you press <kbd>CTRL</kbd> + <kbd>F</kbd> or <kbd>?</kbd> + <kbd>F</kbd>. 
.kbd-demo kbd{border:1px solid #666;border-radius:4px;padding:3px 5px;margin:2px;color:#444;text-decoration:none}To search within a document, most browsers will open a Find tool if you press CTRL + F or + F.

Of course, if you style your <kbd> elements this way, you need to avoid using <kbd> to represent a string of typed characters.

Please type the following: <kbd>The quick brown fox jumped over the lazy dog.</kbd> 
Please type the following: The quick brown fox jumped over the lazy dog.

Obviously that renders the styling pretty meaningless. But that isn’t really what the <kbd> element is intended for.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for kbd

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll