alligator's blog

While reading the old new thing I noticed that keyboard shortcuts in articles are shown using the <kbd> element, like so:

<kbd>Alt</kbd> + <kbd>f4</kbd>

This element was new to me, so I looked at the spec and found there's a handful of useful elements for various computer-y things that, besides the code element, I'd never noticed before. Namely kbd, var and samp.

At the time of writing, this blog doesn't have custom CSS for these elements beyond setting the font, so you will see them however your browser decides to render them.

kbd

Spec

kbd represents user input. This is typically keyboard input, but could be other sorts of input, such as voice.

Here's some example markup:

Press <kbd>Alt</kbd> + <kbd>F4</kbd> to exit.

And the rendered result:

Press Alt + F4 to exit.

var

Spec

var represents a variable. The spec has a fairly broad definition of this:

This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.

Example markup:

<var>foo</var> + <var>bar</var> = <var>baz</var>

Result:

foo + bar = baz

samp

Spec

samp represents output from a program or system.

Example markup

The system will print <samp>Bad command or file name</samp>.

Result:

The system will print Bad command or file name.

combinations

These elements can be combined in interesting ways, for example code and samp elements can used to show input and output:

<pre>
<code>console.log('hello');</code>
<samp>hello</samp>
</pre>

By default the code and samp elements use a monospace font, so without extra styling this will look like a standard pre block:

console.log('hello');
hello

Of course you can go nuts styling those elements if you so wish:

console.log('hello');
hello

If the kbd element is nested inside of a samp element, it represents user input being echoed back by the system, as would happen at a command interpreter:

<pre><samp>&gt; <kbd>wait</kbd>
time passes...
</samp></pre>

> wait
time passes...

A samp nested inside a kbd element represents input based on system output, for example selecting a menu item being displayed by the system. This ends up being quite verbose, especially if there are multiple steps involved:

<kbd><samp>File</samp></kbd> &gt; <kbd><samp>Open</samp></kbd>

So the spec recommends just using kbd instead:

<kbd>File &gt; Open</kbd>

They both render similarly, although the > in the first example isn't in a monospace font, so it looks a little odd:

File > Open

and just the kbd tag:

File > Open

I always enjoy finding standard HTML elements to replace what would have previously been a div with a class.