<samp>: The Sample Output element
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The<samp>HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such asCourier or Lucida Console).
Try it
<p>I was trying to boot my computer, but I got this hilarious message:</p><p> <samp>Keyboard not found <br />Press F1 to continue</samp></p>samp { font-weight: bold;}Attributes
This element only includes theglobal attributes.
Usage notes
You can use a CSS rule to override the browser's default font face for the<samp> element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.
The CSS to override the default font face would look like this:
samp { font-family: "Courier";}Note:If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the<output> element.
Examples
Basic example
In this basic example, a paragraph includes an example of the output of a program.
<p> When the process is complete, the utility will output the text <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to the next step.</p>Result
Sample output including user input
You can nest the<kbd> element within a<samp> block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:
HTML
<pre><samp><span>mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62<span>mike@interwebz:~$</span> <span>█</span></samp></pre>Note the use of<span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of<kbd> to represent the command the user entered at the prompt in the sample text.
CSS
The CSS that achieves the appearance we want is:
.prompt { color: #b00;}samp > kbd { font-weight: bold;}.cursor { color: #00b;}This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.
Result
The resulting output is this:
Technical summary
| Content categories | Flow content,phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that acceptsphrasing content. |
| Implicit ARIA role | generic |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement |
Specifications
| Specification |
|---|
| HTML # the-samp-element |