- Sample program output

The <samp> tag in HTML is used to mark up sample output from a computer program, typically displayed in a monospace font to distinguish it from regular text. It does not alter the semantics of the text but is used for visual presentation.

Basic Usage of the <samp> Tag

Content wrapped in the <samp> tag is rendered by default in a monospace font (e.g., Courier New) to indicate that it is output from a program or system. For example:

<p>Program output: <samp>Hello, World!</samp></p>

Actual effect:
Program output: <samp>Hello, World!</samp>

Comparison with Other Tags

The <samp> tag is similar in function to <code> and <kbd> but serves different purposes:

• <code>: Marks up code snippets (e.g., function names, variables).
• <kbd>: Marks up user keyboard input.
• <samp>: Marks up program output.

Example comparison:

<code>console.log()</code> output: <samp>Success</samp>, press <kbd>Enter</kbd> to continue.

Effect:
<code>console.log()</code> output: <samp>Success</samp>, press <kbd>Enter</kbd> to continue.

Enhancing Semantics with Other Tags

The <samp> tag can be combined with the <pre> tag to display multi-line program output while preserving formatting:

<pre><samp>
System check complete.
Total files: 42
Memory usage: 64MB
</samp></pre>

Effect:
<pre><samp> System check complete. Total files: 42 Memory usage: 64MB </samp></pre>

Practical Use Cases

Simulating Command-Line Output

<div class="terminal">
  <samp>$ npm install vue</samp><br>
  <samp>+ vue@3.2.47</samp><br>
  <samp>added 1 package in 2s</samp>
</div>

With CSS styling for background color and rounded borders, this can simulate a terminal effect.

Error Messages

<p>Compilation error: <samp>SyntaxError: Unexpected token '}'</samp></p>

Interactive Examples

Combine with JavaScript to dynamically update <samp> content:

<button onclick="runDemo()">Run Example</button>
<samp id="demo-output"></samp>

<script>
  function runDemo() {
    document.getElementById('demo-output').textContent = 'Result: 42';
  }
</script>

Custom Styling

Default styles can be overridden with CSS:

samp {
  font-family: 'Consolas', monospace;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

Accessibility Recommendations

To enhance accessibility, use the aria-live attribute for dynamic content announcements:

<samp aria-live="polite" id="live-output">Ready</samp>

When content is updated via JavaScript, screen readers will announce the changes.