Sunday, 24 November 2013

The samp element

The samp HTML element is used to represent (sample) output from a program. It has been around since HTML1, though back it was simply used to markup a sequence of literal characters.

By default samp is an inline element so it won't break the flow of the page, this means that it can be used within a block of text without any problems.

Usage

Inline sample output

The samp element can represent a program's output within a paragraph or block of text by simply wrapping the output in the tag.

<p>The browser will say <samp>404 Page Not Found</samp>.</p>

A block of sample output

A block of sample output is typically accompanied with the pre (preformatted) tag.

<pre>
<samp>StackOverflowException was unhandled

An unhandled exception of type 'System.StackOverflowException' occurred in MyAssembly.dll</samp>
</pre>

If representing command line input as well as output, the pre, samp and kbd elements can be combined into a giant ball of semantic goodness.

<pre>
<samp>$ <kbd>git status<kbd>
# On branch master
nothing to commit, working directory clean</samp>
</pre>

Styling

Given what we now know about the samp element, we can use this knowledge to intelligently style the elements with minimal markup, depending on the context of course.

For example a command line tool's website could style samp accordingly:

See the Pen The element by Daniel Imms (@Tyriar) on CodePen

Further reading

Read more on the samp element from the following sources: