kbd в HTML


Тег выделяет информацию, которую пользователь должен набирать при помощи клавиатуры. Как правило, браузеры выделяют содержимое тега моноширинным шрифтом уменьшенного размера.


  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.


Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1


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


Закрывающий тег


Пример 1. Использование тега

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ниже.

Рис. 1. Вид контента, оформленного с помощью тега

HTML тег

Элемент (от англ. "keyboard" ‒ «клавиатура») используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. По умолчанию представлен моноширинным шрифтом.

Текст, вложенный в , отображается ' моноширинным шрифтом '. Таким образом, по визуальному эффекту данный элемент похож на элементы , и .


Закрывающий тег


Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:


The tag defines a keyboard input. The tag is used when it is needed to display text that the user should enter into their keyboard (for any number of reasons).

The content of the tag in the browser is displayed in a monospaced font (all characters have the same width).


The tag comes in pairs, the closing tag ( ) isn’t required.



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

HTML kbd Tag


HTML kbd Tag: Main Tips

  • tag is the keyboard input tag (one of the phrase tags).

  • You can customize the HTML using additional CSS.
  • Use it for short commands and not phrases.
Theory is great, but we recommend digging deeper!
Learn HTML5 and CSS3 to Build a Website from Scratch

Stone River eLearning

Use of kbd

HTML identifies a user keyboard entry. Which is why it's extremely useful when displaying user documentation (such as which onscreen or keyboard button you should press), keystrokes, and even instructions for echoed commands (when the system repeats what was inputted). These distinctions can be achieved by nesting kbd tag within samp or more kbd tags:

  • If you nest kbd element inside samp tag, it will act like echoed command: it will output the input command which was typed earlier (i.e. My Input ).
  • If you nest kbd element, it will be seen as a keystroke representation (i.e. CTRL ).
  • If you nest samp inside kbd tag, it will display onscreen input options, such as navigational or button names (i.e. Cancel ).

This tag is typically displayed in a plain, fixed-width (monospace) font.

Remember: the default kbd HTML styling is in the monospace font.

The following example styles the HTML with CSS:

It's recommended to style kbd elements as otherwise they look identical to code elements.

Note: there are no specific attributes for HTML kbd. However, it includes all global attributes.


Sharing is caring!

Code Example

Three keys you really need to familiarize yourself with are CTRL , ALT and DEL .

Great for documentation

The element indicates text that should be typed on a keyboard. This is a fantastic, and underused, element that can be really helpful if you have to write any sort of user documentation. Part of the reason that the element is underused is that the default style is simply a monospace font , which makes it indistinguishable from a element. But with a little bit of styling, you can make your elements much more helpful and communicative.

Of course, if you style your elements this way, you need to avoid using to represent a string of typed characters.

Obviously that renders the styling pretty meaningless. But that isn't really what the element is intended for.

Тег KBD и его атрибуты.

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

Категория тега :
Тег форматирования текста. Начальный тег необходим, конечный тег необходим.

Атрибуты тега :
id - индетификатор.
class - класс CSS
title - всплывающая подсказка.
style - встроенный инлайн стиль.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup - внутренние события.

Тег kbd, синтаксис:
текст введен пользователем.

Список всех HTML-тегов.

Поиск по тегам:
Список всех тегов
А вы знаете как при помощи каскадных таблиц стилей можно использовать несколько шрифтов одновремено?


The HTML tag represents user input. For example, text that the user should enter into their computer/device.

Note that the tag is not to be confused with the tag (which creates a form control for the user to provide input). The tag is used when a document simply needs to display text that the user should enter into their keyboard (for any number of reasons). For example, the tag could be used in a list of instructions for connecting to a network from your computer.


The tag is written as with the user input text enclosed between the start and end tags.


Basic tag usage

Nesting & Tags

You can use the tag along with the tag to represent both user input and sample output.

For example, in a list of instructions, you could instruct the user to click a button. The action of clicking is user input and therefore requires the tag. The name of the button is sample output and therefore requires the tag.

Actually, the HTML5 specifications states that in this case, it would require two elements (one nested inside the other), because it represents an actual key or other single unit of input.

However, the HTML5 specification says that such precision is optional, so the above example would be just as valid if you only used the tag. Like this:


Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

To see more detail on the two versions see HTML5 Tag and HTML4 Tag. Also check out the links to the official specifications below.


Here's a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

Tag Details

For more details about the tag, see HTML5 Tag and HTML4 Tag.


Here are the official specifications for the element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

HTML тег

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

  • От англ. «[k]ey[b]oar[d]» — «клавиатура».
  • В браузере, как правило, отображается моноширинным шрифтом.
  • Если вложен в , то определяет ту часть текстового диалога с системой, которая является вводом данных.
  • Если содержит вложенный , то определяет ввод, основанный на выводе (например, выбор одного из предложенных пунктов меню).
  • Если содержит вложенный , то таким образом определяются конкретные клавиши из ряда введенных.

Тег kbd

Описание тега KBD

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

Браузер обычно отображает такой текст моноширинным шрифтом.

Атрибуты тега KBD

Пример - тег kbd

"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

"Content-Type" content= "text/html; charset=windows-1251" >

Чтобы копировать выделенный текст нажмите CTRL+C

Чтобы его вставить нажмите CTRL+V

Для отмены совершенного действия нажмите CTRL+Z

Илон Маск рекомендует:  Что такое код ibase_query
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL