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
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 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 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.
<var>foo</var> + <var>bar</var> = <var>baz</var>
foo + bar = baz
samp represents output from a program or system.
The system will print <samp>Bad command or file name</samp>.
The system will print Bad command or file name.
These elements can be combined in interesting ways, for example
samp elements can used to show input and output:
<pre> <code>console.log('hello');</code> <samp>hello</samp> </pre>
By default the
samp elements use a monospace font, so without extra styling this will look like a standard pre block:
Of course you can go nuts styling those elements if you so wish:
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>> <kbd>wait</kbd> time passes... </samp></pre>
> wait time passes...
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> > <kbd><samp>Open</samp></kbd>
So the spec recommends just using
<kbd>File > 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
File > Open
I always enjoy finding standard HTML elements to replace what would have previously been a div with a class.