The
<kbd>tag represents keyboard input entered by the user.
Browsers typically display<kbd>text in a monospace (typewriter-style) font to differentiate it from normal text.
It is commonly used in tutorials, documentation, and instructions to show keys or input commands.
Syntax
<kbd>keyboard input</kbd>Attributes
| Attribute | Description |
|---|---|
| None | The <kbd> tag has no unique attributes. It supports global and event attributes only. |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML kbd Tag Example</title>
</head>
<body>
<h2>HTML <kbd> Tag Example</h2>
<p>To save the document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>To refresh a webpage, press <kbd>F5</kbd>.</p>
<p>To open the command prompt, type <kbd>cmd</kbd> in the Run dialog.</p>
</body>
</html>Output
Browser Output
You will see text in a monospace keyboard-like style, such as:
Ctrl, S, F5, cmd, etc.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Since <kbd> is visible inline content, you can easily see the output in your browser.
Try it in our TryIt Editor to observe how the keyboard-style formatting appears.
Notes
<kbd>is used for keyboard input, while<samp>is for sample output, and<code>is for code snippets.- It improves semantics for tutorials and accessibility tools.
- You may style it with CSS for custom keyboard-like UI boxes.
Conclusion
The <kbd> element is perfect for displaying keyboard shortcuts or user input commands clearly and semantically.
It enhances readability in tutorials and helps users identify instructions quickly.
