<samp> Sample output
Sample output from a program or a computer system.
<samp> marks output from a computer program, such as an error message or whatever a command prints. Browsers use a monospace font.
It has three relatives worth keeping apart: <code> for code, <kbd> for what the user types and <var> for variables. Multi-line output goes inside <pre>.
The samp element in the WHATWG standard (opens in a new tab) includes an example of a full terminal session. The Quotes and Code lesson teaches it alongside code.
Syntax
<samp>Program output</samp>When to use it
<samp> quotes what a computer said: an error message in a troubleshooting article, the text a command prints in a tutorial, a code shown on a device display ("E3" on a washing machine), or the status line of a build tool.
Keep the roles apart. Code you write is code, what the user types is kbd, and what the machine prints is samp. In a terminal transcript, the commands can be kbd elements nested inside the samp, because the prompt is output while the command is input.
Do not confuse samp with the output element. output holds a result calculated live on the page, such as the total in an order form. samp quotes output from some other program for the reader to recognise. When you paste real terminal or log output, escape any < and > characters, because messages often contain them and the browser would treat them as tags.
Live example
Edit the code and watch the preview.
<p>If you see <samp>404 Not Found</samp>, the file path is wrong.</p>More examples
Terminal session
A terminal transcript inside pre. The whole session is output, so it sits in samp, and the command the user typed is marked with kbd inside it. The dark background mimics a terminal window.
<pre style="background:#222;color:#eee;padding:12px"><samp>user@laptop:~$ <kbd>ls</kbd>
index.html style.css cat.svg
user@laptop:~$ </samp></pre>Code on a device display
A help page for a dishwasher explains the error codes its display shows. Those codes are output from the machine, so samp fits better than code or plain text. The text around each code explains what it means.
<h2>Error codes</h2>
<ul>
<li><samp>E1</samp> - the water supply is turned off.</li>
<li><samp>E3</samp> - the door is not fully closed.</li>
</ul>Tip: Output is samp, input is kbd, and code is code.
Browser support
Browsers have displayed samp in a monospace font ever since HTML 2.0, and all of them still support it. It has no interactive behaviour, so it looks and works the same everywhere. Nesting kbd inside samp is valid in the Living Standard.
Accessibility
Screen readers give samp no special treatment. Introduce important output in the surrounding text, for example The program prints:, and describe errors in words, as the W3C note Understanding Error Identification (opens in a new tab) recommends.
Common mistakes
Wrong
<code>Error 404: page not found</code>Right
<samp>Error 404: page not found</samp>A message printed by software is output, so samp fits better than code.
Frequently asked questions
What is the samp tag used for?
<samp> is for sample or quoted output from a computer program or system: <samp>File not found</samp>, say, or the response lines in a terminal session. Browsers render it in a monospace font. Multi-line output goes inside <pre> so the line breaks stay put.
How do I show a terminal session in HTML?
Wrap the block in <pre>. Inside it, what the user types goes in <kbd> and what the computer prints goes in <samp>, so you get a prompt with a typed command in kbd followed by the program's response in samp. CSS can then style input and output differently, which makes the session far easier to follow. The input side is covered on the kbd element page.