HTML <samp> Tag

The HTML <samp> tag is used to represent sample output from a computer program or system. It is often utilized when displaying code, error messages, or any text that reflects the output of a program in a web document. By using the <samp> tag, developers can clearly differentiate between normal content and sample output, making it more readable for users. The default styling of the <samp> tag usually applies a monospace font, which helps to visually distinguish it from other text elements on the page.

Syntax of the <samp> Tag

html
<samp>Sample Output</samp>

The text inside the <samp> element will be displayed as sample output, often styled in a monospace font by default.

Attributes of the <samp> Tag

The <samp> tag supports various global attributes that allow developers to enhance its functionality and appearance. While the tag itself has no specific attributes, the following global attributes can be used with it:

AttributeDescription
classAssigns a class name to the element for applying custom CSS.
idSpecifies a unique ID for the element, which can be used to style or script it.
langDefines the language of the element's content.
styleInline styling can be applied to customize the appearance of the sample output.
titleProvides additional information as a tooltip when hovered over the sample text.

By using these attributes, you can customize the appearance and behavior of the <samp> tag to suit your webpage’s design and functionality.

Examples of HTML <samp> Tag

Example 1: Basic Usage of the <samp> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Sample Output Example</title>
</head>
<body>
    <p>Here is the sample output of the program:</p>
    <samp>Output: File not found</samp>
</body>
</html>

In this example, the sample output “file not found” is displayed using the <samp> tag. It helps in making the output distinguishable from regular text.

Example 2: Using the <samp> Tag with CSS Styling

html
<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: #f0f0f0;
            color: red;
        }
    </style>
    <title>Styled Sample Output</title>
</head>
<body>
    <p>System response:</p>
    <samp class="highlight">Error: Access Denied</samp>
</body>
</html>

Here, the <samp> tag is enhanced with a CSS class to highlight the error message. The custom class.highlight changes the background color and text color for better visibility.

FAQs About HTML <samp> Tag

Q1: What is the purpose of the <samp> tag?
A: The <samp> tag is used to display sample output from a computer program or system, often in a monospace font to differentiate it from regular content.

Q2: Can the <samp> tag be styled using CSS?
A: Yes, the <samp> tag supports global attributes like class and style, allowing developers to customize its appearance with CSS.

Q3: Is the <samp> tag important for SEO?
A: While the <samp> tag itself doesn’t directly impact SEO, using it to clearly display sample outputs can improve the user experience, which can contribute to better engagement and, indirectly, SEO.

Q4: What is the difference between the <samp> and <code> tags?
A: The <samp> tag is specifically used for sample output, whereas the <code> tag is used to represent computer code. Both often use a monospace font but have different semantic purposes.

Q5: Is the <samp> tag supported by all browsers?
A: Yes, the <samp> tag is supported by all major browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles