HTML <samp> Tag for Sample Output


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 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.)

PDF mobile

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:

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
   ... phrasing content expected ...
   <samp>... phrasing content ...</samp>
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.

  1. Code the samp element for sample text where phrasing content is expected.
  2. 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.
  3. Include any HTML global attributes on the <samp> tag as appropriate.
  4. Inside the samp element, between the starting <samp> tag and the ending </samp> tag, code the inner HTML phrasing content.
  5. 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>
<style scoped="scoped">
   kbd { font-weight: bold }
   kbd, samp { font-family: Consolas, Monaco, monospace }
<pre><kbd>select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";</kbd><samp>
 1 Terabyte

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