samp HTML 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 <samp> element by Daniel Imms (@Tyriar) on CodePen
Further reading
Read more on the samp
element from the following sources: