1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<header><h1><kbd>: The Keyboard Input element</h1></header><div class="section-content"><p>The <code><kbd></code> <a href="../index">HTML</a> element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> defaults to rendering the contents of a <code><kbd></code> element using its default monospace font, although this is not mandated by the HTML standard.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/kbd.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p><code><kbd></code> may be nested in various combinations with the <a href="samp"><code><samp></code></a> (Sample Output) element to represent various forms of input or output based on visual cues.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div>
<h2 id="usage_notes">Usage notes</h2>
<div class="section-content">
<p>Other elements can be used in tandem with <code><kbd></code> to represent more specific scenarios:</p> <ul> <li>Nesting a <code><kbd></code> element within another <code><kbd></code> element represents an actual key or other unit of input as a portion of a larger input. See <a href="#representing_keystrokes_within_an_input">Representing keystrokes within an input</a> below.</li> <li>Nesting a <code><kbd></code> element inside a <a href="samp"><code><samp></code></a> element represents input that has been echoed back to the user by the system. See <a href="#echoed_input">Echoed input</a>, below, for an example.</li> <li>Nesting a <code><samp></code> element inside a <code><kbd></code> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under <a href="#representing_onscreen_input_options">Representing onscreen input options</a> below.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You can define a custom style to override the browser's default font selection for the <code><kbd></code> element, although the user's preferences may potentially override your CSS.</p> </div>
</div>
<h2 id="examples">Examples</h2>
<h3 id="basic_example">Basic example</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="ZTbJWrxjhMASwIKNqsUzw1VN/1q19gU28u3tFqRG3Tc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Use the command <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>help mycommand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> to view documentation for the
command "mycommand".
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="350" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=basic_example" loading="lazy"></iframe>
</div>
</div>
<h3 id="representing_keystrokes_within_an_input">Representing keystrokes within an input</h3>
<div class="section-content">
<p>To describe an input comprised of multiple keystrokes, you can nest multiple <code><kbd></code> elements, with an outer <code><kbd></code> element representing the overall input and each individual keystroke or component of the input enclosed within its own <code><kbd></code>.</p> <h4 id="unstyled">Unstyled</h4> <p>First, let's look at what this looks like as just plain HTML.</p> <h5 id="html">HTML</h5> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="oe7Eg5nq/4f2N2ClXNhbh2ayCMAdOD/XhxFvckYUGIQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
You can also create a new document using the
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> keyboard shortcut.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <p>This wraps the entire key sequence in an outer <code><kbd></code> element, then each individual key within its own, in order to denote the components of the sequence.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <code><kbd></code> element. In other words, simplifying this to just <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code> would be perfectly valid.</p> <p><strong>Note:</strong> Depending on your style sheet, though, you may find it useful to do this kind of nesting.</p> </div> <h5 id="result_2">Result</h5> <p>The output looks like this without a style sheet applied:</p>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Unstyled sample" id="frame_unstyled" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=unstyled" loading="lazy"></iframe>
</div> <h4 id="with_custom_styles">With custom styles</h4> <p>We can make more sense of this by adding some CSS:</p> <h5 id="css">CSS</h5> <p>We add a new selector for nested <code><kbd></code> elements, <code>kbd>kbd</code>, which we can apply when rendering keyboard keys:</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="j4kW4UyXh7LB9+a8To58tlJDnnfToFHmAdME8bdQoUU=" data-language="css"><span class="token selector">kbd > kbd</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1px 2px 0<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <h5 id="html_2">HTML</h5> <p>Then we update the HTML to use this class on the keys in the output to be presented:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="XBK2d3K2sEkLYg/1BEf54GdKIyEnnx1NmL6ibyAdKh0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
You can also create a new document by pressing the
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> shortcut.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h5 id="result_3">Result</h5> <p>The result is just what we want!</p>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="With custom styles sample" id="frame_with_custom_styles" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=with_custom_styles" loading="lazy"></iframe>
</div>
</div>
<h3 id="echoed_input">Echoed input</h3>
<div class="section-content">
<p>Nesting a <code><kbd></code> element inside a <a href="samp"><code><samp></code></a> element represents input that has been echoed back to the user by the system.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="cRO5xElsOic3+L7b0b/PK7++zE4J+KaQWog5Hs9cA8k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
If a syntax error occurs, the tool will output the initial command you typed
for your review:
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>custom-git ad my-new-file.cpp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_4">Result</h4>
<div class="code-example" id="sect6">
<iframe class="sample-code-frame" title="Echoed input sample" id="frame_echoed_input" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=echoed_input" loading="lazy"></iframe>
</div>
</div>
<h3 id="representing_onscreen_input_options">Representing onscreen input options</h3>
<div class="section-content">
<p>Nesting a <code><samp></code> element inside a <code><kbd></code> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.</p> <p>For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="g9Fuxj2PJB83TkidSQozMyepKdHCiVYO/ZYRZ5GqlaI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
To create a new file, choose the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>File<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>
⇒<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>New Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> menu option.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Don't forget to click the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> button to confirm once
you've entered the name of the new file.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <p>This does some interesting nesting. For the menu option description, the entire input is enclosed in a <code><kbd></code> element. Then, inside that, both the menu and menu item names are contained within both <code><kbd></code> and <code><samp></code>, indicating an input which is selected from a screen widget.</p> <h4 id="result_5">Result</h4>
<div class="code-example" id="sect7">
<iframe class="sample-code-frame" title="Representing onscreen input options sample" id="frame_representing_onscreen_input_options" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=representing_onscreen_input_options" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>
<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-kbd-element">HTML Standard <br><small># the-kbd-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>kbd</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, creating a <kbd> element incorrectly resulted in an <code>HTMLSpanElement</code> object, instead of the expected <code>HTMLElement</code>.</details></td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="code"><code><code></code></a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd</a>
</p>
</div>
|
