What is samp tag in html

HtmlConceptBeginner · 3 min read

What is the HTML <samp> Tag? Definition and Usage

The <samp> tag in HTML is used to display sample output from a computer program or system. It shows text exactly as a program would output it, helping users understand what to expect from commands or code.

⚙️

How It Works

The <samp> tag is like a window showing the exact words or results a computer program would produce. Imagine you are reading a recipe book and the <samp> tag is the part that shows the final dish's picture — it shows the real output, not instructions.

When you use <samp>, the browser usually displays the text in a monospace font, which means each letter takes up the same space. This style helps the output look like it came from a terminal or console, making it easier to read and understand.

It is a semantic tag, meaning it tells browsers and assistive technologies that the text inside is sample output, improving accessibility and clarity.

💻

Example

This example shows how to use the <samp> tag to display the output of a command:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Output Example</title>
</head>
<body>
  <p>When you type <code>ls</code> in the terminal, you might see:</p>
  <p><samp>Documents  Downloads  Pictures  Music</samp></p>
</body>
</html>

Output

When you type ls in the terminal, you might see: Documents Downloads Pictures Music

🎯

When to Use

Use the <samp> tag when you want to show users the exact output from a program, command, or script. This is helpful in tutorials, documentation, or any page explaining how software works.

For example, if you are writing a guide on how to use a command line tool, you can use <samp> to show what the user will see after running commands. It makes the instructions clearer and more trustworthy.

It is not for user input or code itself, but specifically for the output that programs produce.

✅

Key Points

The <samp> tag displays sample output from programs.
Browsers show <samp> text in monospace font by default.
It improves accessibility by marking output text semantically.
Use it in tutorials, documentation, and technical writing.
It is different from <code> (for code) and <kbd> (for user input).

✅

Key Takeaways

The tag shows sample output from programs or commands.

It uses monospace font to mimic terminal or console output.

Use in documentation to clearly display program results.

It is different from tags for code or user input.

Using improves clarity and accessibility of output text.