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: kbd, samp and 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 pre).

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 kbd element:

<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 kbd:

<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>

The outer 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 kbd elements:

<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.

The 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 samp:

<p>A message will appear on the screen informing you what to do next: <samp>Press <kbd>Enter</kbd> to continue</samp>.</p>

Both the kbd and samp elements can also be used in conjunction with the pre element.

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:

the pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements

Used in conjunction with the kbd and 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.

Browser impact

Using the elements mentioned here doesn’t seem to have much effect in modern browsers. Both the kbd and 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.