HTML <kbd> Tag

The <kbd> tag is a phrase tag and defines a keyboard input. It produces an inline element which is displayed in browser's default monotype font.

Inserting a <kbd>element in another <kbd> element represents an actual key or other unit of input as a portion of a larger input.

Recommendation: The <kbd> tag is not deprecated yet, but it is possible to achieve richer effects using CSS font-family property.

Syntax

The <kbd> tag comes in pairs. The content must be written between opening (<kbd>) and closing (</kbd>) tags.

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Write the following word in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
      <p>Save the document by pressing <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>
   </body>
</html>

Now lets see an example with CSS font-family and border properties:

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         kbd.key{ 
         font-family: monospace;
         border-radius: 3px;
         padding: 1px 2px 0;
         border: 1px solid black;
         border-color: #990000;}
      </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>

See the list of all phrase tags below:

Tag Descriptions
<em> Renders as emphasized text.
<strong> Defines an important text.
<dfn> Defines the definition term.
<code> Defines a computer code piece.
<samp> Defines a sample output from a programming code.
<kbd> Defines the keyboard input.
<var> Defines a variable.

The <kdb> tag also supports the Global Attributes.