HTML5 <kbd> Tag

The HTML <kbd> element is used to represent user input and produces an inline element displayed in the browser’s default monospace font.

The only content permitted inside this element is Phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <kbd> tag can be any element that accepts phrasing content.

When the <kbd> element is nested inside a <samp> element, it represents the input as it was echoed by the system. When the <kbd> element contains a <samp> element, it represents input based on system output, for example invoking a menu item. When the <kbd> element is nested inside another <kbd> element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

  • When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.
  • When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.
  • When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

The following style is applied to this element by default:

kbd {
  font-family: monospace;
}

Here is an example of using this tag:

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML kbd Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <kbd> element on MDN.
  2. You can also read the HTML <kbd> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top