Description
HTML element <kbd> is used to define a keyboard text, which most browsers render in a monospaced font.
It is used on a text that is supposed to be entered using a keyboard by the user.
Don't get confused. The element <kbd> and the element <code> are different.
- Element
<kbd>is used to define a text that the user has to enter using a keyboard - Element
<code>is used to define code fragments
The below table summarizes its usage.
| Usage Details | |
| Placement | It is displayed as an Inline element. |
| Contents | It can contain Inline elements and text. |
| Tags | Both opening and closing tags are required. |
| Versions | HTML 2, 3.2, 4, 4.01, 5 |
Syntax
Here is the basic syntax of the <kbd> element.
<kbd>...</kbd>Examples
In the below example, the <kbd> element is used to define the text that the user is supposed to enter using a keyboard.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Element - kbd</title>
</head>
<body>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text in Microsoft Windows.</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text in Mac OS.</p>
</body>
</html>Attributes
The following table shows the list of supported and unsupported attributes for the <kbd> element.
| Attribute Type | Details |
| Element-Specific Attributes | The tags <kbd> doesn't have any element-specific attributes. |
| Global Attributes | Like all other HTML tags, the tag <kbd> supports the HTML Global Attributes. |
| Event Attributes | The tags <kbd> also supports the HTML Event Attributes. |
Browser Compatibility
The tags <kbd> is supported in all modern browsers.
- Google Chrome 1+
- Internet Explorer or Edge 2+
- Firefox 1+
- Apple Safari 1+
- Opera 4+