W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

kbd ... ⁄kbd

Share it

kbd intro kbd browser display kbd parents - children kbd syntax

HTML5 kbd element

The kbd element allows you to mark up user input: »video
→ keyboard input or voice command: e.g. press <kbd>tab<⁄kbd> to navigate through focusable elements in page. See 2 examples (video demonstrations) of user keyboard input and its result here and here

→ user clickling on a sample of computer output: e.g. click on <kbd><samp>Download<⁄samp><⁄kbd> to download the image, where Download represents a sample of computer output; samp element nested inside kbd element

About kbd

Display & support kbd

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children kbd

Attributes kbd

Syntax kbd

1<kbd> ... </kbd> »video

Attributes and Values kbd (comma separated)

<kbdattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<kbd accesskey="h"> ... </kbd>
2.class=class name»html »img<kbd class="class_name"> ... </kbd>
3.contenteditable="",  , true, false »html<kbd contenteditable="true"> ... </kbd>
4.contextmenu=menu id value»html<kbd contextmenu="menu_id_value"> ... </kbd>
5.data-*= value -<kbd data-http-error="404"> ... </kbd>
6.dir=ltr, rtl, auto»html<kbd dir="ltr"> ... </kbd>
7.draggable= true,  , false»img<kbd draggable="false"> ... </kbd>
8.dropzone= copy, move, link, string:, file: -<kbd dropzone="copy"> ... </kbd>
9.hidden= "",  , hidden»html »img<kbd hidden="hidden"> ... </kbd>
10.id=id name»html »img<kbd id="unique_id_name"> ... </kbd>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<kbd lang="en"> ... </kbd>
17.spellcheck="",  , true, false»html<kbd spellcheck="true"> ... </kbd>
18.style=CSS property:value»html »img<kbd style="color:red"> ... </kbd>
19.tabindex= integer »img<kbd tabindex="3"> ... </kbd>
20.title=text»html »link»style »abbr»dfn
»img »meter
<kbd title="html page"> ... </kbd>
21.translate="", yes, no»html »img<kbd translate="yes"> ... </kbd>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration kbd element

HTML5 kbd element: mark up user input

min video details
00:00 video tutorial: kbd element
00:04 kbd element allows you to mark user input like:
- keyboard input OR
- a voice command
00:10 represents user input: F5, Yes, No, Alt, Shift, i, Alt+Shift+I, File | Save Page As
00:29 let's properly mark all user input using kbd element
01:02 Alt, Shift, i keys must be pressed together; they are grouped so we will nest them inside kbd element, this whole group
01:28 user inputs displaying in page
01:37 the File | Save Page As represents a sample of computer output on which the user clicks (inputs it) and must be marked properly using samp element
01:39 - 'File' represents computer output (marked with samp element) because it was generated by the browser when we open it;
- 'Save Page As' represents computer output (samp) because File's submenu with its items (Save Page As included) was generated by the browser when we selected the File menu

For more information about the kbd element, please see the specs: W3CWHATWG