W3docs
en
Log in

HTML <kbd> Tag

The <kbd> tag defines a keyboard input. Use tag when it is needed to display text that the user should enter into their keyboard. Learn and try examples.

The <kbd> tag defines a keyboard input. The tag is used when it is necessary to display a text that the user should enter into the keyboard (for any number of reasons). This element is often underused, but it is very useful for writing any type of user documentation.

In the browser, the content of the tag is displayed in a monospaced font (all characters have the same width). One of the reasons that <kbd> is underused is that a monospaced font is the default style, which makes it indistinguishable from a <code> element. But adding some style to <kbd> elements can make them more communicative and helpful.

You can use other elements with <kbd> to add some specificity:

  • If you insert a <kbd> element into another <kbd>, an input unit will be represented as a part of a larger unit.
  • If you insert a <kbd> element into a <samp> element, it will represent an input echoed back to the user by the system.
  • If you insert a <samp> element into a <kbd> element, it will represent an input based on a text that is represented by the system.

Syntax

The <kbd> tag comes in pairs. The content is written between the opening (<kbd>) and closing (<kbd>) tags. However, the closing tag (</kbd>) isn’t required.

Example of the HTML <kbd> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Use the combination of these keys to save the document
      <kbd>
        <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>
    </p>
  </body>
</html>
Try it Yourself »

Result

kbd tag example

Tip

The <kbd> tag is not deprecated yet, but it is possible to achieve richer effects using CSS font-family or border properties.

Example of the HTML <kbd> tag used with CSS properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 1px 2px 0;
        border-radius: 3px;
        border: 1px solid #666;
        border-color: #990000;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>
      Save the document by pressing
      <kbd>
         <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>.
    </p>
    <p>
      Create a new document by pressing
      <kbd>
         <kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd>
      </kbd>.
    </p>
  </body>
</html>
Try it Yourself »

Attributes

The <kbd> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <kbd> Tag

{
    "tag_name": "kbd"
}

Practice

Practice

What is the purpose and usage of the HTML <kbd> tag?