HTML <kbd> Tag

❮ Prev Next ❯

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

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 <kbd> tag?

Common properties to alter the visual weight/emphasis/size of text in <kbd> tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <kbd> tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for <kbd> tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <kbd> tag:

CSS text-shadow property adds shadow to text.
CSS text-align-last property sets the alignment of the last line of the text.
CSS line-height property specifies the height of a line.
CSS letter-spacing property defines the spaces between letters/characters in a text.
CSS word-spacing property sets the spacing between words.