HTML <kbd> Tag for Keyboard Input

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <kbd> Tag in HTML

The <kbd> tag is used to render input from keyboard entry. The kbd element is one of the phrase elements in HTML. Most browsers will display the keyboard input using a monospaced font such as Courier as in the mathematical expression in this example:

To computer one terabyte, enter 1024*1024*1024*1024 in the calculator app. Without <kbd>: To computer one terabyte, enter 1024*1024*1024*1024 in the calculator app.

To distinguish a digit zero from the letter "O" some browsers (most notably Opera) use a font that has a zero with a slash through it. The same effect can be achieved in other browsers by applying a specific font-family style to kbd elements:

To computer one terabyte, enter 1024*1024*1024*1024 in the calculator app.

Note that since the kbd element is a phrase element, its content appears inline with other phrasing content in the same paragraph or block. To display input that consists of multiple lines, such as one might enter by pressing the Return key at the end of each line, you need to separate lines of output, which can be accomplished in a number of different ways:

add <br/> tags for line breaks
add a "white-space: pre" style or "white-space: pre-wrap" style to the <kbd> tag or one of its ancestors
put the kbd tag inside a pre element

Since the content of a pre element can include various phrase elements, the last approach makes it easy to display both input and sample output:

Example of using the <kbd> tag to display keyboard input along with sample output:

select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";------------- 1 Terabyte ------------- 1099511627776

In the example above, a font-weight: bold style is applied to the keyboard input so you can tell the difference between input and output.

These are actual working examples of the <kbd> tag example code below.

<kbd> Tag Syntax

Rules for coding HTML `kbd` elements

<body>
   ...
   ... phrasing content expected ...<kbd>... phrasing content ...</kbd>...
   ...
</body>

Rules for coding HTML `kbd` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the kbd element to indicate keyboard input where phrasing content is expected.
Begin the kbd element with a starting <kbd> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <kbd> tag as appropriate.
Inside the kbd element, between the starting <kbd> tag and the ending </kbd> tag, code the inner HTML phrasing content.
End the kbd element with a matching </kbd> closing tag.

Content Model

Content of the kbd element

The content of the kbd element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<kbd> Tag Attributes

Attributes of the <kbd> tag

global attributes

The only attributes that can be coded on the <cite> tag are the common HTML attributes.

<kbd> Tag Examples

Examples of the `kbd` tag in HTML 5

Examples of using the <kbd> tag to display keyboard input

(see <kbd> tag demo above)

<p>To computer one terabyte, enter <kbd>1024*1024*1024*1024</kbd> in the calculator app.</p>

<div>
<style scoped="scoped">
   kbd {
      font-family: Monaco, Consolas, monospace;
      font-weight: bold; }
</style>
<p>To computer one terabyte, enter <kbd>1024*1024*1024*1024</kbd> in the calculator app.</p>
</div>

<p>Example of using the &lt;kbd&gt; tag to display keyboard input along with sample output:</p>
<figure>
<style scoped="scoped">
   kbd { font-weight: bold }
   kbd, samp { font-family: Consolas, Monaco, monospace }
</style>
<pre><kbd>select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";</kbd><samp>
-------------
 1 Terabyte
-------------
1099511627776</samp></pre>
</figure>

Changes in HTML 5 - <kbd> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the kbd element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5