<kbd> HTML Tag
- 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>.
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>
Obviously that renders the styling pretty meaningless. But that isn’t really what the <kbd>
element is intended for.
Browser Support for kbd
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
All | All | All | All | All | All |