HTML <samp> Tag
The HTML <samp> tag is an inline element marking up sample output from a program, script, or system. Learn when and how to use it with W3docs examples.
The HTML <samp> tag marks up sample output from a computer program, script, or system — the text a program prints back to the user. By default, browsers render its content in a monospace font.
<samp> is an inline phrasing element, not a block. It flows within a line of text just like <em> or <code>, and it does not create a paragraph break or a box of its own. If you need to display a multi-line block of output while preserving line breaks and spacing, wrap the <samp> element inside a <pre> element.
When to use <samp>
<samp> is one of several monospace "technical" elements, and the difference between them is semantic, not visual:
- Use
<code>for source code — the text a programmer writes. - Use
<samp>for the output a program produces in response. - Use
<kbd>for keyboard input the user is expected to type. - Use
<var>for a variable or placeholder name.
So the rule of thumb is: if a human or another program typed it, it is <kbd> or <code>; if the computer printed it, it is <samp>.
If you want a live container that JavaScript fills with the result of a calculation, reach for the <output> element instead — <samp> is for representing output as static, marked-up text.
Syntax
The <samp> tag comes in pairs. The content is written between the opening (<samp>) and closing (</samp>) tags.
Examples
Command and terminal output
A common use is documenting what a command prints. Here the command the reader types is wrapped in <kbd>, and the response is wrapped in <samp>:
<!DOCTYPE html>
<html>
<head>
<title>Command output</title>
</head>
<body>
<p>Type <kbd>node --version</kbd> and you will see something like <samp>v20.11.1</samp>.</p>
<p>Full session:</p>
<pre><samp>$ npm run build
> [email protected] build
> next build
✓ Compiled successfully
Done in 4.21s.</samp></pre>
</body>
</html>For multi-line output like the build log above, <samp> is placed inside <pre>: <pre> preserves the whitespace and line breaks, while <samp> adds the meaning ("this is program output").
An application error message
<samp> is also a good fit for quoting the exact message a system shows the user:
<p>
If the upload fails, the application displays:
<samp>Error 413: Payload too large. Maximum file size is 25 MB.</samp>
</p><samp>, <code>, <kbd> and <var> side by side
This example shows the four related elements together so you can compare how each one is used:
<p>
Run <code>let total = price * qty;</code> where
<var>price</var> and <var>qty</var> are numbers.
Press <kbd>Enter</kbd> and the console prints
<samp>NaN</samp> if either variable is undefined.
</p>Attributes
The <samp> tag supports the Global attributes and the Event Attributes.
Styling <samp>
The default monospace font can be overridden with CSS, typically through the font-family property — though browser preferences or user-agent stylesheets may take priority. A common pattern is to give sample output a subtle background so it stands out from surrounding prose:
<!DOCTYPE html>
<html>
<head>
<style>
samp {
font-family: "Courier New", monospace;
background-color: #f4f4f4;
color: #c7254e;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<p>The server responded with <samp>200 OK</samp>.</p>
</body>
</html>Accessibility
<samp> carries no special semantics for assistive technology — screen readers announce its text exactly like surrounding prose and do not say "sample output." Its value is for human authors and for styling, not for an accessibility tree role. Do not rely on <samp> alone to convey that something is output; if that distinction matters to the reader, make it clear in the visible text as well (as the examples above do with labels like "the application displays:").