<samp>: The Sample Output element
Try it
HTML Demo: <samp>
<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>
Output
I was trying to boot my computer, but I got this hilarious message:
Keyboard not found
Press F1 to continue
Press F1 to continue
Attributes
This element only includes the global 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:
css
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 simple example, a paragraph includes an example of the output of a program.
html
<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
When the process is complete, the utility will output the text
Scan complete. Found N results. You can then proceed to
the next step.
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
html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</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:
css
.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:
mike@interwebz:~$ md5 -s "Hello world" MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 mike@interwebz:~$ █
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 accepts phrasing content. |
| Implicit ARIA role | generic |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement |
Specifications
| Specification |
|---|
| HTML Standard # the-samp-element |
Browser compatibility
Report problems with this compatibility data on GitHubChrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
|---|---|---|---|---|---|---|---|---|---|---|---|
Legend
Tip: you can click/tap on a cell for more information.
Full support
