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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
---
title: '<kbd>: Элемент ввода с клавиатуры'
slug: Web/HTML/Element/kbd
translation_of: Web/HTML/Element/kbd
---
<p><span class="seoSummary"><strong>HTML-элемент ввода с клавиатуры</strong> (<strong><code><kbd></code></strong>) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста.</span> По общему соглашению, {{Glossary("user agent")}} использует моноширинный шрифт для отображения содержимого элемента <code><kbd></code> по умолчанию, хотя это и не указывается HTML стандартом явно.</p>
<p><code><kbd></code> можно использовать в различных комбинациях с {{HTMLElement("samp")}} (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Этот элемент использует только <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
<h2 id="Usage_notes">Usage notes</h2>
<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 {{anch("Representing keystrokes within an input")}} below.</li>
<li>Nesting a <code><kbd></code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system. See {{anch("Echoed input")}}, below, for an example.</li>
<li>Nesting a <code><samp></code> element<em> </em>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 {{anch("Representing onscreen input options")}} below.</li>
</ul>
<div class="note">
<p>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>
<h2 id="Examples">Examples</h2>
<h3 id="Basic_example">Basic example</h3>
<pre class="brush: html"><p>Use the command <kbd>help mycommand</kbd> to view documentation
for the command "mycommand".</p>
</pre>
<h4 id="Result">Result</h4>
<p>{{ EmbedLiveSample('Basic_example', 350, 80) }}</p>
<h3 id="Representing_keystrokes_within_an_input">Representing keystrokes within an input</h3>
<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>
<pre class="brush: html"><p>You can also create a new document using the keyboard shortcut
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p></pre>
<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>
<h5 id="Result_2">Result</h5>
<p>The output looks like this without a style sheet applied:</p>
<p>{{EmbedLiveSample("Unstyled", 650, 80)}}</p>
<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 new new style for <code><kbd></code> elements, <code>"key"</code>, which we can apply when rendering keyboard keys:</p>
<pre class="brush: css">kbd.key {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}</pre>
<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>
<pre class="brush: html"><p>You can also create a new document by pressing
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.</p></pre>
<h5 id="Result_3">Result</h5>
<p>The result is just what we want!</p>
<p>{{EmbedLiveSample("With_custom_styles", 650, 80)}}</p>
<h3 id="Echoed_input">Echoed input</h3>
<p>Nesting a <code><kbd></code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system.</p>
<pre class="brush: html"><p>If a syntax error occurs, the tool will output the initial
command you typed for your review:</p>
<blockquote>
<samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote></pre>
<p>The result looks like this:</p>
<p>{{EmbedLiveSample("Echoed_input", 650, 100)}}</p>
<h3 id="Representing_onscreen_input_options">Representing onscreen input options</h3>
<p>Nesting a <code><samp></code> element<em> </em>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>
<pre class="brush: html"><p>To create a new file, choose the menu option
<kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New
Document</samp></kbd></kbd>.</p>
<p>Don't forget to click the <kbd><samp>OK</samp></kbd> button
to confirm once you've entered the name of the new file.</p></pre>
<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>
<p>Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside <code><kbd></code>, but by also wrapping each key in its own <code><kbd></code> element.</p>
<p>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>Depending on your style sheet , though, you may find it useful to do this kind of nesting.</p>
<p>The output from this HTML looks like this:</p>
<p>{{EmbedLiveSample("Representing_onscreen_input_options", 650, 120)}}</p>
<h2 id="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', 'semantics.html#the-kbd-element', '<kbd>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</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', '<kbd>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("html.elements.kbd")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{htmlelement("code")}}</li>
</ul>
<div>{{HTMLRef}}</div>
|
