HTML <samp> Tag

The HTML <samp> tag is used to represent sample output from a computer program or system. It is often styled in a monospace font by browsers to visually distinguish it from the surrounding content, making it ideal for displaying system messages, code results, or any kind of computer-generated output.

By using the <samp> tag, you can semantically indicate that the content inside represents output from a program, which improves both readability and accessibility.

Basic Syntax of HTML <samp> Tag

The basic structure of the <samp> tag is:

</>
Copy
<samp>Sample Output</samp>

The enclosed text is displayed in a monospace font by default.

Example of Using the <samp> Tag

Here’s an example where the <samp> tag is used to display a system message:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Sample Output Example</h2>
        <p>The system returned: <samp>Error 404: File not found</samp></p>
    </body>
</html>
Example of Using the <samp> Tag

Explanation: The <samp> tag semantically marks the text “Error 404: File not found” as sample output, which is styled in a monospace font for better readability.

Styling the <samp> Tag with CSS

You can style the <samp> tag using CSS to make it stand out further:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            samp {
                font-family: "Courier New", Courier, monospace;
                color: #007BFF;
                background-color: #f0f0f0;
                padding: 2px 4px;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Sample Output</h2>
        <p>Output: <samp>Operation completed successfully</samp></p>
    </body>
</html>
Styling the <samp> Tag with CSS

Result: The sample output text “Operation completed successfully” is styled with a custom font, blue text color, and a light gray background to enhance visibility.

Attributes of HTML <samp> Tag

  • Global Attributes: The <samp> tag supports all global attributes, such as id, class, and style.
  • Event Attributes: You can attach event handlers like onclick, onmouseover, etc., to the <samp> tag.

These attributes allow you to style or make the sample output interactive.

Difference Between <samp>, <code>, and <kbd> Tags

  • <samp>: Represents sample output from a program or system.
  • <code>: Represents inline code or programming snippets.
  • <kbd>: Represents user input, such as keystrokes or commands.

Use the <samp> tag specifically for displaying system-generated outputs, while <code> is for code and <kbd> for user input.

Practical Applications of the <samp> Tag

  • Error Messages: Display error outputs like “Error 404: File not found”.
  • Command Line Outputs: Show results or responses from terminal commands.
  • Program Outputs: Represent the results of a function or program execution in documentation.
  • Logs and Diagnostics: Display log entries or diagnostic messages in technical documents.

The <samp> tag enhances the readability and semantic clarity of system output in both web pages and technical documentation.