Code and Keys in HTML: Using the code, var, samp and kbd elements

HTML was originally designed to display technical documents, so it’s not surprising that there are several elements devoted to marking up programming examples and instructions on web pages. Some of these elements are fairly well known; others are relatively rare. As always, knowing the tags and their correct use expands any developer’s fluency in HTML:

code

The <code> element is the most commonly used of all these. It should surround all visible code examples on web pages, whether HTML, CSS, JavaScript, C+, or any other programming language. By default, <code> is displayed inline:

<p>Paragraph content is contained within <code>&lt;p> … &lt;/p></code> tags.</p>

Which produces:

Paragraph content produces <p> … </p> tags.

By default, the <code> tag will display text content in the browser’s default monospaced font, although this can be easily changed in CSS. When used in code blocks, it should be combined with the <pre> element and a class representing the language used in the block:

<pre><code class="language-javascript">function randomizer(min,max) {
    randomresult = Math.random() * (max - min) + min;
    return randomresult;
}</code></pre>

Well-formatted code examples require close attention to both typography and context, including such details as tab-sizing. At the same time, the self-referential nature of marking up code with more code can be confusing. To make things easier, I would recommend the following:

• use JavaScript to style and color the code syntax appropriately: the best I know of is Lea Verou’s Prism.

kbd

Used for keyboard commands and shortcuts:

<p>To paste copied text content stripped of formatting, use <kbd>⌘</kbd>+<kbd>Opt</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.</p>

Like <code>, the result is inline and presented using the browser’s default monospaced font. Where possible, I prefer to style the <kbd> elements to make them clearer:

kbd {

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

padding: 0.1em 0.5em;

margin: 0 0.2em;

box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;

background-color: #f7f7f7;

}

Which produces:

To paste copied text content stripped of formatting, use ⌘Opt+Shift+V

var

Intended to markup variables. The default formatting provided by <var> is commonly found in printed computer books, but it is relatively rare online. An example:

<p>By tracking the <var>randomresult</var> variable, we can…

Text inside <var> appears italicized by default.

samp

Probably the rarest of all the elements in use today; intended to show the output of code or an an operation. For example, if I was trying to demonstrate use of the <small> element:

<p>In HTML5, the <small> element is intended to denote inline fine print, legalese, copyright or licensing information, as an inline sidenote.

<p>An example might be:

<code><p>This content is licensed under Creative Commons <small>CC 4.0 Attribution ShareAlike</small></code>

The example would be the output of the code example, formatted correctly:

<p><sample>This content is licensed under Creative Commons <small>CC 4.0 Attribution ShareAlike</small></sample>

Which would produce:

This content is licensed under Creative Commons CC 4.0 Attribution ShareAlike

View the code for the kbd example on CodePen