<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 and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceAttributes
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
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
samp {
font-family: monospace;
}