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:

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.