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:
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.