<samp>

Sample output from a program: a message, a console response, or error text.

Display
inline
Closing tag
Required
Permitted content
Phrasing content
On this page

Example

#
HTML
<p>
  If you forget to close a parenthesis, the console will show the error
  <samp>SyntaxError: missing ) after argument list</samp>.
</p>
Preview

Definition and usage

#

The <samp> element marks text generated by a program or system: an error message, the output of a terminal command, a server’s response, or text displayed by an application. Browsers show it in a monospace font.

The division of roles is easy to remember: <code> marks code someone wrote, <kbd> marks input the user types, and <samp> marks the computer’s response. That way, even in a long tutorial, it’s clear who’s "speaking" at any given moment.

Put multi-line output inside <pre><samp>…</samp></pre>. If you want to show a command the user typed within a terminal session transcript, nest a <kbd> element inside <samp>.

Syntax

#
Syntax
<samp>program message</samp>

Attributes

#

This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.

More examples

#
A terminal session
HTML
<pre><samp>$ <kbd>node --version</kbd>
v22.11.0</samp></pre>
Preview

Default CSS

#

Most browsers display this element with these default styles:

CSS
samp {
  font-family: monospace;
}

Browser support

#

Widely available

Works in all modern browsers, phones included. You can use it without worry.

  • Chrome
  • Edge
  • Firefox
  • Safari

Good practices

#
  • Copy error messages exactly, character for character. The reader might want to paste them into a search engine.
  • In a terminal session transcript, mark commands with <kbd> and responses with <samp>.
  • Put long output inside <pre> to preserve the layout of columns and indentation.

Related entries

#

Spotted a mistake or missing an example? Write to us.