What is kbd in html

HTML Tag

The tag defines a keyboard input. The tag is used when it is necessary to display a text that the user should enter into the keyboard (for any number of reasons). This element is often underused, but It is very useful for writing any type of user documentation.

In the browser, the content of the tag is displayed in a monospaced font (all characters have the same width). One of the reasons that is underused is that a monospaced font is the default style which makes it indistinguishable from a element. But adding some style to elements can make them more communicative and helpful.

You can use other elements with to add some specificity:

• If you insert a element into another , an input unit will be represented as a part of a larger unit.
• If you insert a element into a element, it will represent an input echoed back to the user by the system
• If you insert a element into a element, it will represent an input based on a text that is represented by the system.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.However the closing tag () isn’t required.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>Use the combination of these keys to save the document kbd> kbd>Ctrl kbd>+kbd>S kbd> kbd> p> body> html>

Result

The tag is not deprecated yet, but it is possible to achieve richer effects using CSS font-family, or border properties.

Example of the HTML tag used with CSS properties:

html> html> head> title>Title of the document title> style> kbd.key < padding: 1px 2px 0; border-radius: 3px; border: 1px solid #666; border-color: #990000; font-family: monospace; > style> head> body> p> Save the document by pressing kbd> kbd>Ctrl kbd>+kbd>S kbd> kbd>. p> p> Create a new document by pressing kbd> kbd class="key">Ctrl kbd>+kbd class="key">N kbd> kbd>. p> body> html>

Attributes

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

What is kbd in html

Пользовательский ввод? Нет, не слышал! Лучше один раз увидеть, каких действий ждёт от вас компьютер.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку "Кратко" Скопировано

Тег обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом.

По умолчанию браузеры выводят моноширинным шрифтом.

Как пишется

Скопировать ссылку "Как пишется" Скопировано

   Для вызова справки нажмите ?.  p> Для вызова справки нажмите kbd>?kbd>. p>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку "Как понять" Скопировано

Для вывода сложных комбинаций клавиш, каждая отдельная клавиша оборачивается в свой тег . При желании, всю комбинацию можно обернуть в ещё один для группировки.

   Эту страницу можно распечатать, если нажать  Ctrl + P .  p> Эту страницу можно распечатать, если нажать kbd> kbd>Ctrlkbd> + kbd>Pkbd> kbd>. p>    Скопировать Скопировано Не удалось скопировать   

В этом примере символ плюса не является клавишей, которую нужно нажать, поэтому он не обёрнут в .

Также используется для вывода команд в интерфейсе:

   Для поиска по проекту откройте меню  Edit > Find in Files… .  p> Для поиска по проекту откройте меню kbd> Edit > Find in Files… kbd>. p>    Скопировать Скопировано Не удалось скопировать   

Атрибуты

Скопировать ссылку "Атрибуты" Скопировано

Оформление

Скопировать ссылку "Оформление" Скопировано

Содержимое тега можно визуально оформлять с помощью CSS-правил. Например, для обрамления комбинаций клавиш рамкой определим такое правило:

 kbd  padding: 2px 3px 1px; border: 1px solid #ffffff; border-radius: 3px;> kbd  padding: 2px 3px 1px; border: 1px solid #ffffff; border-radius: 3px; >    Скопировать Скопировано Не удалось скопировать   

Затем обернём значения клавиш в :

   Для вставки текста нажмите Ctrl + V.  p> Для вставки текста нажмите kbd>Ctrlkbd> + kbd>Vkbd>. p>    Скопировать Скопировано Не удалось скопировать   

Результат будет выглядеть так:

Использование

Скопировать ссылку "Использование" Скопировано

При создании справочной информации по компьютерной тематике, часто бывает необходимо показать пользователю, как будет выглядеть программный код. В таких случаях на помощь приходят теги , , и в сочетании с .

Например, в ходе выполнения программы надо подсказать пользователю о вводе переменной. Для отображения выходных данных используется тег , а для переменной внутри него — теги и :

   В ходе работы программы вам надо указать необходимое количество итераций:   Укажите значение переменной TmplRepeat:  p> В ходе работы программы вам надо указать необходимое количество итераций: p> p> samp>Укажите значение переменной var>kbd>TmplRepeatkbd>var>:samp> p>    Скопировать Скопировано Не удалось скопировать   

Листинг программы является распространённым вариантом совместного использования нескольких тегов для оформления кода:

Разметка в этом случае будет выглядеть следующим образом:

 
int main() int age; double weight; std::cout << "Укажите возраст: "; std::cin >> age; std::cout << "Укажите вес: "; std::cin >> weight;>
 
 pre>code>int main() < int var>agevar>; double var>kbd>weightkbd>var>; std::cout << "Укажите возраст: "; std::cin >> var>kbd>agekbd>var>; std::cout << "Укажите вес: "; std::cin >> var>kbd>weightkbd>var>; >code>pre>    Скопировать Скопировано Не удалось скопировать   
 
Подсказка
 
Скопировать ссылку "Подсказка" Скопировано
 
Источник
 
: The Keyboard Input element
 
The HTML 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 user agent defaults to rendering the contents of a element using its default monospace font, although this is not mandated by the HTML standard.
 
Try it
 
Attributes
 
This element only includes the global attributes.
 
Usage notes
 
Other elements can be used in tandem with to represent more specific scenarios:
 
 
Nesting a element within another element represents an actual key or other unit of input as a portion of a larger input. See Representing keystrokes within an input below.
 
Nesting a element inside a element represents input that has been echoed back to the user by the system. See Echoed input, below, for an example.
 
Nesting a element inside a 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 Representing onscreen input options below.
 
 
Note: You can define a custom style to override the browser's default font selection for the element, although the user's preferences may potentially override your CSS.
 
Examples
 
Basic example
 
p> Use the command kbd>help mycommandkbd> to view documentation for the command "mycommand". p> 
 
Result
 
Representing keystrokes within an input
 
To describe an input comprised of multiple keystrokes, you can nest multiple elements, with an outer element representing the overall input and each individual keystroke or component of the input enclosed within its own .
 
Unstyled
 
First, let's look at what this looks like as just plain HTML.
 
HTML
 
p> You can also create a new document using the kbd>kbd>Ctrlkbd>+kbd>Nkbd>kbd> keyboard shortcut. p> 
 
This wraps the entire key sequence in an outer element, then each individual key within its own, in order to denote the components of the sequence.
 
Note: You don't need to do all this wrapping; you can choose to simplify it by leaving out the external element. In other words, simplifying this to just Ctrl+N would be perfectly valid.
 
Note: Depending on your style sheet, though, you may find it useful to do this kind of nesting.
 
Result
 
The output looks like this without a style sheet applied:
 
With custom styles
 
We can make more sense of this by adding some CSS:
 
CSS
 
We add a new selector for nested elements, kbd>kbd , which we can apply when rendering keyboard keys:
 
kbd > kbd  border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; > 
 
HTML
 
Then we update the HTML to use this class on the keys in the output to be presented:
 
p> You can also create a new document by pressing the kbd>kbd>Ctrlkbd>+kbd>Nkbd>kbd> shortcut. p> 
 
Result
 
The result is just what we want!
 
Echoed input
 
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.cppkbd>samp> blockquote> 
 
Result
 
Representing onscreen input options
 
Nesting a element inside a 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.
 
For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:
 
p> To create a new file, choose the kbd>kbd>samp>Filesamp>kbd> ⇒kbd>samp>New Documentsamp>kbd>kbd> menu option. p> p> Don't forget to click the kbd>samp>OKsamp>kbd> button to confirm once you've entered the name of the new file. p> 
 
This does some interesting nesting. For the menu option description, the entire input is enclosed in a element. Then, inside that, both the menu and menu item names are contained within both and , indicating an input which is selected from a screen widget.
 
Result
 
Technical summary
 
 
 
 
Content categories
 
Flow content, phrasing content, palpable content.
 
 
 
Permitted content
 
Phrasing content.
 
 
 
Tag omission
 
None, both the starting and ending tag are mandatory.
 
 
 
Permitted parents
 
Any element that accepts phrasing content.
 
 
 
Implicit ARIA role
 
No corresponding role
 
 
 
Permitted ARIA roles
 
Any
 
 
 
DOM interface
 
 HTMLElement 
 
 
 
 
Specifications
 
Browser compatibility
 
BCD tables only load in the browser
 
See also
 
Found a content problem with this page?
 
This page was last modified on Jun 13, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
MDN
 
Support
 
Our communities
 
Developers
 
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
 
Источник