<samp> - The Sample Output Element

The `<samp>` Element

Inline HTML 2.0

The sample output element represents sample or quoted output from a computer program, script, or system. It’s typically rendered in a monospace font.

Quick Example

<p>The command returned: <samp>Operation completed successfully</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The command returned: <samp>Operation completed successfully</samp></p>

Syntax

<samp>sample output</samp>

The <samp> element represents text that is output by a computer program or system.

Common Use Cases

Command Output

<p>Running the command produces:</p>
<p><samp>Build complete. 0 errors, 0 warnings.</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Running the command produces:</p>
<p><samp>Build complete. 0 errors, 0 warnings.</samp></p>

Error Messages

<p>If the file is not found, you'll see:</p>
<p><samp>Error: File not found</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>If the file is not found, you'll see:</p>
<p><samp>Error: File not found</samp></p>

Console Messages

<p>The console displays:</p>
<p><samp>Server started on port 3000</samp></p>
<p><samp>Database connection established</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The console displays:</p>
<p><samp>Server started on port 3000</samp></p>
<p><samp>Database connection established</samp></p>

System Notifications

<p>Windows shows: <samp>Update installed successfully</samp></p>
<p>macOS displays: <samp>Time Machine backup complete</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Windows shows: <samp>Update installed successfully</samp></p>
<p>macOS displays: <samp>Time Machine backup complete</samp></p>

Program Results

<p>The calculation returned: <samp>42</samp></p>
<p>Test result: <samp>All tests passed (15/15)</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The calculation returned: <samp>42</samp></p>
<p>Test result: <samp>All tests passed (15/15)</samp></p>

Technical Elements Comparison

<!-- Computer/program output -->
<p>Output: <samp>Process complete</samp></p>

<!-- User keyboard input -->
<p>Type: <kbd>npm start</kbd></p>

<!-- Computer code -->
<p>Use: <code>console.log()</code></p>

<!-- Variables -->
<p>Value of <var>x</var> is 10</p>

With User Input

Combine <kbd> and <samp> to show input/output:

<p>Command: <kbd>whoami</kbd></p>
<p>Output: <samp>username</samp></p>

<p>Command: <kbd>date</kbd></p>
<p>Output: <samp>Mon Dec 11 14:30:00 PST 2024</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Command: <kbd>whoami</kbd></p>
<p>Output: <samp>username</samp></p>

<p>Command: <kbd>date</kbd></p>
<p>Output: <samp>Mon Dec 11 14:30:00 PST 2024</samp></p>

Multi-Line Output

For longer output, combine with <pre>:

<p>Server log:</p>
<pre><samp>[14:30:15] Server started
[14:30:16] Connected to database
[14:30:17] Listening on port 3000
[14:30:18] Ready to accept requests</samp></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Server log:</p>
<pre><samp>[14:30:15] Server started
[14:30:16] Connected to database
[14:30:17] Listening on port 3000
[14:30:18] Ready to accept requests</samp></pre>

Styling

Customize output appearance:

<style>
samp {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #0066cc;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  color: #333;
}
</style>

<p>Result: <samp>Compilation successful</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
samp {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #0066cc;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  color: #333;
}
</style>

<p>Result: <samp>Compilation successful</samp></p>

Console-Style Output

<style>
.console-output {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.console-output samp {
  color: #4ec9b0;
}
</style>

<div class="console-output">
<samp>$ npm install</samp><br>
<samp>Installing dependencies...</samp><br>
<samp>✓ Installation complete</samp>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.console-output {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}
.console-output samp {
  color: #4ec9b0;
}
</style>

<div class="console-output">
<samp>$ npm install</samp><br>
<samp>Installing dependencies...</samp><br>
<samp>✓ Installation complete</samp>
</div>

Real-World Examples

Installation Instructions

<ol>
<li>Run <kbd>npm install package-name</kbd></li>
<li>Wait for <samp>added 1 package</samp></li>
<li>Verify with <kbd>npm list</kbd></li>
<li>Check for <samp>package-name@1.0.0</samp></li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol>
<li>Run <kbd>npm install package-name</kbd></li>
<li>Wait for <samp>added 1 package</samp></li>
<li>Verify with <kbd>npm list</kbd></li>
<li>Check for <samp>package-name@1.0.0</samp></li>
</ol>

Troubleshooting Guide

<article>
<h4>Common Error</h4>
<p><strong>Error message:</strong></p>
<p><samp>Permission denied</samp></p>

<p><strong>Solution:</strong></p>
<p>Run the command with <kbd>sudo</kbd></p>
<p>You should see: <samp>Operation completed</samp></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h4>Common Error</h4>
<p><strong>Error message:</strong></p>
<p><samp>Permission denied</samp></p>

<p><strong>Solution:</strong></p>
<p>Run the command with <kbd>sudo</kbd></p>
<p>You should see: <samp>Operation completed</samp></p>
</article>

API Documentation

<div class="api-docs">
<h4>Response Example</h4>
<p>On success, the API returns:</p>
<pre><samp>{
"status": "success",
"data": {
  "id": 123,
  "name": "John Doe"
}
}</samp></pre>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="api-docs">
<h4>Response Example</h4>
<p>On success, the API returns:</p>
<pre><samp>{
"status": "success",
"data": {
  "id": 123,
  "name": "John Doe"
}
}</samp></pre>
</div>

Terminal Session

<div class="terminal">
<p><kbd>cd projects</kbd></p>
<p><kbd>ls</kbd></p>
<p><samp>project1  project2  project3</samp></p>
<p><kbd>cd project1</kbd></p>
<p><kbd>git status</kbd></p>
<p><samp>On branch main<br>nothing to commit, working tree clean</samp></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="terminal">
<p><kbd>cd projects</kbd></p>
<p><kbd>ls</kbd></p>
<p><samp>project1  project2  project3</samp></p>
<p><kbd>cd project1</kbd></p>
<p><kbd>git status</kbd></p>
<p><samp>On branch main<br>nothing to commit, working tree clean</samp></p>
</div>

Success/Error States

<style>
.success { color: #28a745; }
.error { color: #d73a49; }
.warning { color: #ffc107; }
</style>

<p><samp class="success">✓ Build successful</samp></p>
<p><samp class="error">✗ Build failed</samp></p>
<p><samp class="warning">⚠ 3 warnings</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.success { color: #28a745; }
.error { color: #d73a49; }
.warning { color: #ffc107; }
</style>

<p><samp class="success">✓ Build successful</samp></p>
<p><samp class="error">✗ Build failed</samp></p>
<p><samp class="warning">⚠ 3 warnings</samp></p>

With Code

Show code and its output:

<p>Code:</p>
<pre><code>console.log("Hello, World!");</code></pre>

<p>Output:</p>
<pre><samp>Hello, World!</samp></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Code:</p>
<pre><code>console.log("Hello, World!");</code></pre>

<p>Output:</p>
<pre><samp>Hello, World!</samp></pre>

Accessibility

Screen readers typically read <samp> content as regular text. The monospace styling is visual only.

Provide Context

Make it clear what the output represents:

Unclear
Clear

<p><samp>Error 404</samp></p>

<p>The server returned: <samp>Error 404: Not Found</samp></p>

Label Output Sections

<p><strong>Expected output:</strong></p>
<p><samp>Process completed successfully</samp></p>

<p><strong>Actual output:</strong></p>
<p><samp>Error: Connection timeout</samp></p>

Block-Level Output

<div class="output-block">
<h4>Compilation Output</h4>
<pre><samp>Compiling src/main.js...
Compiling src/utils.js...
Compiling src/config.js...

Build complete!
Output: dist/bundle.js (45.2 KB)</samp></pre>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="output-block">
<h4>Compilation Output</h4>
<pre><samp>Compiling src/main.js...
Compiling src/utils.js...
Compiling src/config.js...

Build complete!
Output: dist/bundle.js (45.2 KB)</samp></pre>
</div>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <samp> element has been supported since the earliest browsers.

 For computer code and programming.
Learn more →

     
 For keyboard input from users.
Learn more →
 
     
 For variables in code or math.
Learn more →
 
    
 
 For preformatted text blocks.
Learn more →

 
Specifications
Section titled “Specifications”

WHATWG HTML Living Standard
MDN Web Docs

     
     Previous 
 <s> - The Strikethrough Element      Next 
 <small> - The Small Text Element

<samp> - The Sample Output Element

The <samp> Element

Quick Example

Syntax

Common Use Cases

Command Output

Error Messages

Console Messages

System Notifications

Program Results

Technical Elements Comparison

With User Input

Multi-Line Output

Styling

Console-Style Output

Real-World Examples

Installation Instructions

Troubleshooting Guide

API Documentation

Terminal Session

Success/Error States

With Code

Accessibility

Screen Reader Behavior

Provide Context

Label Output Sections

Block-Level Output

Browser Support

Related Elements

Specifications

The `<samp>` Element