HTML <samp> Tag

The HTML <samp> tag is used to define sample output from a computer program or script. This tag is a semantic element, meaning it adds meaning to the content it wraps, indicating to both the browser and the developer that the enclosed text represents output from a program. Unlike plain text or code, <samp> specifically denotes displayed results, helping to differentiate between instructions and the results of those instructions.

Syntax

<samp> Sample Output </samp>

Attributes

The <samp> tag does not support any specific attributes. It relies solely on its semantic nature and any global attributes applicable to all HTML elements.

Example

<p>The following is an example of sample program output:</p>
<samp>
  Hello, World!
</samp>

More Examples

Basic Usage

The most common use case for the <samp> tag is displaying the output of a script, program, or command-line instruction.

<p>Command Output:</p>
<pre><samp>Successfully executed command: ls -l</samp></pre>

Here we are using a <pre> tag to maintain the formatting for the sample.

Within Other Semantic Elements

The <samp> tag can be nested inside other elements such as <pre> and <code> for more complex scenarios.

<p>Here is the result of running the code:</p>
<pre>
  <code>
    int main() {
      printf("Sample output here\n");
      return 0;
    }
  </code>
  <samp>Sample output here</samp>
</pre>

Here we are using <pre> to preserve white space in both the code and its corresponding output.

Showing Variable Output

The <samp> tag isn't limited to static text. You can also use it to display dynamic content or variable results

<p>Your current user ID is:</p>
<samp id="user-id">Loading...</samp>

<script>
  // Simulate fetching user ID
  setTimeout(() => {
    document.getElementById('user-id').textContent = 'user12345';
  }, 1000);
</script>

Here, we use JavaScript to update the content of the <samp> element with a simulated dynamic value.

Combining with CSS for Styling

You can use CSS to style <samp> elements, making them visually distinct from regular text.

<style>
  samp {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 2px 5px;
    font-family: monospace;
  }
</style>

<p>Here is another example:</p>
<samp>Error: File not found.</samp>

This example uses CSS to apply a background, border, and monospace font to the sample output, making it clear what is a program output

Browser Support

The <samp> tag is widely supported across all major browsers.

• Chrome: Fully supported
• Edge: Fully supported
• Firefox: Fully supported
• Safari: Fully supported
• Opera: Fully supported

Notes and Tips

• Semantic Clarity: Use the <samp> tag specifically for displaying sample output from a program, script or command line. This helps provide semantic meaning to your content.
• Combination with <pre> and <code>: For better formatting and more complex examples, combine <samp> with <pre> (for preserving whitespace and line breaks) and <code> (for presenting code snippets).
• Styling: Use CSS to visually distinguish <samp> text, enhancing user experience and ensuring clear differentiation between code and its output.
• Accessibility: Although this tag doesn't directly influence accessibility, using semantic tags helps screen readers and other assistive technologies properly interpret content structure.
• Dynamic Content: The <samp> tag can contain dynamically generated output, making it suitable for showing variable or user-specific results.