Using HTML’s kbd, samp and pre elements
I was recently taking a look at the W3C‘s HTML5 specification when I noticed some elements I hadn’t come across before that are used to markup keyboard input and program output:
pre (ok, I have heard of this one!).
Given the backwards compatibility nature of HTML5 I didn’t instantly assume that they were new to the HTML5 specification as I’m fully aware that I don’t know all the HTML elements that are in existence. Sure enough a quick check of the HTML 4.01 specification shows that they are not new (in fact
kbd was in the HTML 2.0 specification), although the HTML5 specification does provide more detail about their use, but I have never really used them (except for
The `kbd` element
As the name might suggest, the
kbd element is used to represent user input that is typically entered via a keyboard. You might use this when you are describing what a user would enter to carry out a specific task, for example:
<p>To get a list of directories, type <kbd>dir</kbd> in the command line and press Enter.</p>
You’ll notice that the phrase “press Enter” has no extra markup although since it is an action that the user needs to perform via the keyboard, it too should be contained within a
<p>To get a list of directories, type <kbd>dir</kbd> in the command line and press <kbd>Enter</kbd>.</p>
However the specification specifies that to markup “an actual key or other single unit of input” the
kbd should be nested within another
<p>To get a list of directories, type <kbd>dir</kbd> in the command line and press <kbd><kbd>Enter</kbd></kbd>.</p>
I must admit that this looks a bit odd, a mistake even, when representing a single key press but when indicating a key combination it makes a bit more sense:
<p>To undo your last action, press <kbd><kbd>Ctrl</kbd> + <kbd>Z</kbd></kbd>.</p>
kbd indicates a block of input whilst the inner
kbds indicate each individual input step. That said, the specification does point out that such “fine tuning” isn’t actually required, so the above examples could equally be written without the outer
<p>To get a list of directories, type <kbd>dir</kbd> in the command line and press <kbd>Enter</kbd>.</p> <p>To undo your last action, press <kbd>Ctrl</kbd> + <kbd>Z</kbd>.</p>
To me it seems cleaner to only use an outer
kbd when there is more than one key press involved in the input process.
kbd element can be used in conjunction with the
samp element which I will look at next.
The `samp` element
The purpose of the
samp element is to represent sample output of a program or computer program. For example:
<p>It wasn't the most helpful of error messages as it simply said: <samp>An error has occurred</samp>.</p>
As mentioned above,
samp can be used with a
kbd element to either represent input based on system output or input as echoed by the system. This sounds a little confusing (it did to me!) so let’s take a look at examples of both cases.
The following example tells the user which menu item to choose to save an image file. Since the menu item is output from a (unspecified) computer program, each menu selection is enclosed in a
samp which itself is enclosed in a
kbd as it is user input. The whole thing is then enclosed in an outer
kbd to represent the entire input block:
<p>To save the image file, select <kbd><kbd><samp>File</samp></kbd> - <kbd><samp>Save as...</samp></kbd></kbd>.</p>
If the computer program echoes instructions on what do do, e.g. in a popup box and you want to describe that, the
kbd would be nested within a
<p>A message will appear on the screen informing you what to do next: <samp>Press <kbd>Enter</kbd> to continue</samp>.</p>
samp elements can also be used in conjunction with the
The `pre` element
Since I write a blog, I have of course come across the
pre element before and I suspect you have also. I was aware that it is used to represent preformatted text, and usually used it in conjunction with the
code element for displaying code (for example in this article). But beyond that I haven’t used it for anything else.
The specification states that:
preelement represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements
Used in conjunction with the
samp elements, the
pre element can be used, for example, to represent a session from a computer program. The following sample represents screen output for changing a directory at the Windows command prompt:
<pre><samp>C:\\></samp> <kbd><kbd>cd html5</kbd> + <kbd>Enter</kbd></kbd> <samp>C:\\html5></samp></pre>
Again you don’t actually have to go into this amount of fine detail when marking up such things.
Using the elements mentioned here doesn’t seem to have much effect in modern browsers. Both the
samp elements appear to be rendered as italics, and the
pre element renders the text in a fixed-width font (usually Courier). Naturally you can change this via CSS should you wish to do so.