Revision 918013 of <kbd>

<h2 id="Summary">Summary</h2>

<p>The <em>HTML Keyboard Input Element</em> (<strong>&lt;kbd&gt;</strong>) represents user input and produces an inline element displayed in the browser's default monospace 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 interface {{domxref("HTMLSpanElement")}} for this element.</li>
</ul>

<h2 id="Attributes">Attributes</h2>

<p>This element only includes the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>

<h2 id="Examples">Examples</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;

&lt;p&gt;Save the document by pressing &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;S&lt;/kbd&gt;&lt;/p&gt;</pre>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample('Examples', 350, 120) }}</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>

<p>When the <font face="Consolas, Liberation Mono, Courier, monospace">&lt;kbd&gt;&nbsp;</font>element is nested inside a&nbsp; <font face="Consolas, Liberation Mono, Courier, monospace">&lt;samp&gt; </font>element, it represents the input as it was echoed by the system.</p>

<p>When the &nbsp;<font face="Consolas, Liberation Mono, Courier, monospace">&lt;kbd&gt;</font>element&nbsp;<em>contains</em>&nbsp;a <font face="Consolas, Liberation Mono, Courier, monospace">&lt;samp&gt; e</font>lement, it represents input based on system output, for example invoking a menu item.</p>

<p>When the&nbsp;<font face="Consolas, Liberation Mono, Courier, monospace">&lt;kbd&gt;&nbsp;</font>element is nested inside another&nbsp;<font face="Consolas, Liberation Mono, Courier, monospace">&lt;kbd&gt; </font>element, it represents an actual key or other single unit of input as appropriate for the input mechanism.</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>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Expanded to include any user input, like voice input and individual keystrokes.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.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>{{htmlelement("code")}}</li>
</ul>

<div>{{HTMLRef}}</div>