HTML Free Codes<samp>
Represents program output examples
from a computer programDefinition and Usage
The <samp> tag is used to define sample output from a computer program.
The content inside is displayed in the browser's default monospace font, typically used to show what a program or script would output.
The <samp> tag is a semantic element that helps distinguish program output from other types of content.
<samp> for displaying output, error messages, or results from computer programs.
<samp> with <kbd> to show user input and program output together.
Browser Support
The <samp> tag is supported in all major browsers:
Attributes
The <samp> tag supports the Global Attributes in HTML.
The <samp> tag also supports the Event Attributes in HTML.
Examples
Basic Sample Output
Display simple program output:
Example
<p>The program returned: <samp>Hello, World!</samp></p>Error Message
Show error messages from a program:
Example
<p>Error message: <samp>File not found: config.json</samp></p>Terminal Output
Display command-line output:
Example
<p>After running the command, the terminal displayed:</p>
<samp>
Server started on port 3000
Connected to database
Application is running...
</samp>Command Output with Input
Combine user input with program output:
Example
<p>To check the version, type <kbd>node --version</kbd></p>
<p>Output: <samp>v18.16.0</samp></p>Sample Output with Pre Tag
Use with <pre> to preserve formatting:
Example
<p>Program execution log:</p>
<pre><samp>
[2025-01-15 10:30:45] INFO: Application started
[2025-01-15 10:30:46] INFO: Database connected
[2025-01-15 10:30:47] INFO: Server listening on port 8080
[2025-01-15 10:30:48] SUCCESS: Ready to accept connections
</samp></pre>Styled Sample Output
Apply custom styling to sample output:
Example
<style>
samp {
background-color: #1e1e1e;
color: #00ff00;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
display: inline-block;
}
samp.error {
color: #ff4444;
}
samp.success {
color: #00ff00;
}
</style>
<p>Success: <samp class="success">Operation completed successfully</samp></p>
<p>Error: <samp class="error">Failed to connect to server</samp></p>Try it Yourself
Interactive Example
See how <samp> displays program output:
Command: npm --version
Output: 9.5.1
Error: ERROR 404: Page not found
Samp vs Code vs Kbd vs Var
Understanding when to use each semantic text tag:
| Tag | Purpose | Example Use Case |
|---|---|---|
<samp> |
Sample output from a program | Error messages, terminal output, program results |
<code> |
Computer code or programming syntax | Source code, function names, HTML tags, CSS properties |
<kbd> |
Keyboard input from user | Keyboard shortcuts, commands to type, key combinations |
<var> |
Mathematical or programming variables | Variable names in equations, parameters in formulas |
<kbd>command</kbd>, program executes <code>function()</code>, and returns <samp>output</samp>.
When to Use Samp
- Displaying output from a computer program or script
- Showing error or success messages from applications
- Presenting terminal or console output
- Illustrating what a program would return or display
- Demonstrating log entries or debug information
- Showing results from API responses or data processing
Best Practices
- Use
<samp>specifically for program output, not for general code or user input - Combine with
<pre>when formatting and whitespace are important - Use
<kbd>for user input and<samp>for program output in documentation - Style appropriately to distinguish from surrounding text (monospace font, background color)
- Consider using semantic color coding (green for success, red for errors)
- Keep output concise and relevant to avoid overwhelming readers
- Use
<code>for code snippets and<samp>for execution results
Default CSS Settings
Most browsers will display the <samp> element with the following default values:
Default CSS
samp {
font-family: monospace;
}