<kbd>

  • Revision slug: HTML/Element/kbd
  • Revision title: <kbd>
  • Revision id: 336159
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <kbd> Element (or HTML Keyboard Input Element) represents user input and produces an inline element displayed in the browser's default monotype font.

Attributes

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

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.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-kbd-element', '<kbd>')}} {{Spec2('HTML WHATWG')}}  

{{SpecName('HTML5 W3C', 'the-kbd-element.html#the-kbd-element', '<kbd>')}}

{{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<kbd>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;kbd&gt;</code> Element</strong> (or <em>HTML Keyboard Input Element</em>) represents user input and produces an inline element displayed in the browser's default monotype font.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p>This element has no other attributes than the <a href="/en-US/docs/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</p>
<h2 id="Example">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 id="Result">Result</h3>
<p>Type the following in the Run dialog: <code>cmd</code><br />
  Then click the OK button.</p>
<h2 id="Note">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 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <p>{{SpecName('HTML5 W3C', 'the-kbd-element.html#the-kbd-element', '&lt;kbd&gt;')}}</p>
      </td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;kbd&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Element/code" title="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>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision