The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). One typical use for kbd is in training manuals, instructing the student what to do. User agents typically display kbd in a monospaced (fixed-width) font. , , and are typically displayed in a similar and congruent fashion within an architecture.
When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.
When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.
When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.
In the following example, kbd is used to indicated keys to press:
To make George eat an apple, press Shift+F3
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:
To make George eat an apple, select
File
|
Eat Apple...
<p>To make George eat an apple, select <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd></p>
Such precision isn’t necessary; the following is equally fine:
To make George eat an apple, select File | Eat Apple...
<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>
Recent Comments