HTML samp Tag: How to Show Sample Program Output

The HTML samp tag shows the result of a computer program or command. It helps readers know which text came from a system or code output.

Understand the samp Tag in HTML

The <samp> tag in HTML marks text as a sample output from a program, script, or system.

Here is the basic tag:

<samp>sample output text</samp>

It does not need extra attributes, but you can style it with CSS.

Web browsers show text inside the samp tag with a monospace font by default. This font helps readers tell program output apart from normal text.

Here is a quick example:

<p>Output: <samp>Hello World</samp></p>

This code shows the words Hello World in a monospace font. It tells the user that this text came from a program.

You can place <samp> inside paragraphs or table cells. It can also work with list items or inside preformatted text for code documentation.

How to Style the HTML samp Tag with CSS

You can use CSS to change the font, color, or size of the samp text. Here is a simple way to change its look:

<style>
samp {
  color: red;
  font-size: 16px;
  font-weight: bold;
}
</style>

This code makes the text in <samp> appear with custom styles.

Examples

Show Calculation Result from a Script:

<p>Calculation Result: <samp>42</samp></p>

The text 42 is marked as program output. You can use this way when you need to show results from scripts or math functions.

Style <samp> to Match Dark Mode Terminal:

<style>
samp {
  background-color: black;
  color: lime;
  padding: 4px;
}
</style>
<p>Output: <samp>File Uploaded</samp></p>

The CSS styles make the output look like a terminal screen in this example.

Combine <sam> with preformatted Text:

<pre>Server Response: <samp>200 OK</samp></pre>

The pre tag keeps the exact format, and samp marks the output.

Wrapping Up

In this article, you learned the purpose of the HTML<samp> tag and how to use it with CSS.

Here is a quick recap:

• The samp tag shows sample program output.
• Browsers show it in a monospace font by default.
• You can style it with CSS for better presentation.
• It works well inside many elements.

FAQs

<p>Output: <samp>File saved successfully</samp></p>

<style>
samp {
  color: blue;
  font-weight: bold;
}
</style>
<p>Result: <samp>Success</samp></p>

<p>Command: <code>print("Hi")</code></p>
<p>Output: <samp>Hi</samp></p>

<p>Message: <samp>Access Granted</samp></p>

Similar Reads