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