<kbd>

  • Revision slug: HTML/Element/kbd
  • Revision title: kbd
  • Revision id: 232818
  • Created:
  • Creator: FreakCERS
  • Is current revision? No
  • Comment 1 words added

Revision Content

Summary

The HTML Keyboard Input Element (<kbd>) produces an inline element displayed in the browser's default monotype font. This element is used to identify user input.

Usage context

Permitted content Flow content or phrasing content.
Tag omission None, must have both a start tag and an end tag
Permitted parent elements Phrasing content
Normative document HTML 5, section 4.6.14; HTML 4.01, section 9.2.1

Attributes

This element has no other attributes than the global attributes, common to all elements.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Example

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>

Result

Type the following in the Run dialog: cmd
Then click the OK button.

Note

A CSS rule can be defined for the kbd selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.

See also

{{ HTML:Element_Navigation() }}

{{ languages( { "pl": "pl/HTML/Element/kbd" } ) }}

Revision Source

<h2>Summary</h2>
<p>The HTML Keyboard Input Element (<span style="font-family: Courier New;">&lt;kbd&gt;</span>) produces an inline element displayed in the browser's default monotype font. This element is used to identify user input.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">Flow content</a> or <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> </tr> <tr> <td>Tag omission</td> <td>None, must have both a start tag and an end tag</td> </tr> <tr> <td>Permitted parent elements</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">Phrasing content</a></td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">HTML 5, section 4.6.14</a>; <a class=" external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1" title="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">HTML 4.01, section 9.2.1</a></td> </tr> </tbody>
</table>
<h2>Attributes</h2>
<p>This element has no other attributes than the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</p>
<h2>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note">
<p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div>
<h2>Example</h2>
<pre class="brush: html">&lt;p&gt;Type the following in the Run dialog: &lt;kbd&gt;cmd&lt;/kbd&gt;&lt;br /&gt;Then click the OK button.&lt;/p&gt;
</pre>
<h3>Result</h3>
<p>Type the following in the Run dialog: <code>cmd</code><br>
Then click the OK button.</p>
<h2>Note</h2>
<p>A CSS rule can be defined for the <code>kbd</code> selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.</p>
<h2>See also</h2>
<ul> <li><a href="/en/HTML/Element/code" title="en/HTML/Element/code">HTML Code Element</a></li> <li>HTML4 Specification: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a></li> <li>HTML5 Specification: <a class=" external" href="http://www.whatwg.org/html/#the-kbd-element" title="http://www.whatwg.org/html/#the-kbd-element">The <code>kbd</code> element</a></li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "pl": "pl/HTML/Element/kbd" } ) }}</p>
Revert to this revision