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.


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.

<samp>StackOverflowException was unhandled

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

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.

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


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: