HTML <samp> Tag for Sample Output

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <samp> Tag in HTML 5

The <samp> tag is used to render sample computer output. The samp element is one of the phrase elements in HTML. Most browsers will display the sample output using a monospaced font such as Courier as in this example:

If you use a block tag inside the <samp> element, HTML validators will report an error such as element pre not allowed as child of element <samp> in this context.

Note that since the samp element is a phrase element, its content appears inline with other phrasing content in the same paragraph or block. To display multiple lines of output using the <samp> tag you need to separate lines of output, which can be accomplished in a number of different ways:

add <br/> tags for line breaks
add a "white-space: pre" style or "white-space: pre-wrap" style to the <samp> tag or one of its ancestors
put the samp tag inside a pre element

Since the content of a pre element can include various phrase elements, the last approach makes it easy to display both keyboard input and sample output:

Example of using the <samp> tag to display sample output:

select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";------------- 1 Terabyte ------------- 1099511627776

In the example above, a font-weight: bold style is applied to the keyboard input so you can tell the difference between input and output. The font-family style is also overridden to use a font that has a zero with a slash through it, in order to distinguish between a digit zero and the letter "O".

These are actual working examples of the <samp> tag example code below.

<samp> Tag Syntax

Rules for coding HTML `samp` elements

<body>
   ...
   ... phrasing content expected ...
   <samp>... phrasing content ...</samp>
   ...
</body>

Rules for coding HTML `samp` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the samp element for sample text where phrasing content is expected.
Begin the samp element with a starting <samp> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <samp> tag as appropriate.
Inside the samp element, between the starting <samp> tag and the ending </samp> tag, code the inner HTML phrasing content.
End the samp element with a matching </samp> closing tag.

Content Model

Content of the samp element

The content of the samp element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<samp> Tag Attributes

Attributes of the <samp> tag

global attributes

The only attributes that can be coded on the <cite> tag are the common HTML attributes.

<samp> Tag Examples

Examples of the `samp` tag in HTML 5

Examples of using the <samp> tag to display sample output

(see <samp> tag demo above)

<p>If you use a block tag inside the &lt;samp&gt; element, HTML
   validators will report an error such as <q><samp>element not allowed
   as child of element &lt;samp&gt; in this context.</samp></q></p>

<p>Example of using the &lt;samp&gt; tag to display sample output from some keyboard input:</p>
<figure>
<style scoped="scoped">
   kbd { font-weight: bold }
   kbd, samp { font-family: Consolas, Monaco, monospace }
</style>
<pre><kbd>select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";</kbd><samp>
-------------
 1 Terabyte
-------------
1099511627776</samp></pre>
</figure>

Changes in HTML 5 - <samp> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the samp element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5