👀 Live Preview
Command output shown inline:
In this example, the output of the command is Hello, World!.
HTML <samp> Tag
Overview
What You’ll Learn
The <samp> tag marks sample output from programs and systems. This guide covers syntax, comparisons with code and kbd, styling, use cases, and best practices for beginners.
Sample Output
Program results.
vs code
Output not source.
vs kbd
Not key input.
Tutorials
Docs and blogs.
CSS Style
class and style.
Semantic
Meaningful markup.
Fundamentals
What Is the <samp> Tag?
The <samp> tag is an HTML element designed to represent sample (or output) content. It is particularly useful when showcasing examples of computer code output, terminal text, or other types of sample data.
Valid HTML5 — Sample Output Element
Use samp for what a program prints or returns. Use code for the source code itself.
Common in coding tutorials, API documentation, and tech blogs where you show command-line results or mock system responses inline.
Foundation
📝 Syntax
Enclose the sample content within opening <samp> and closing </samp> tags:
syntax.html
<samp>Your Sample Output Here</samp>Syntax Rules
- Use
sampinline inside paragraphs and list items. - Wrap actual or example program output, not source code.
- Use
prefor multi-line block output with preserved whitespace. - Apply global attributes like
classandstylefor presentation.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Inline output | <samp>text</samp> | Sample result |
| Source code | Use code | Not samp |
| Keyboard keys | Use kbd | Not samp |
| Block output | Use pre | Multi-line |
| Styling | class, style | Global attrs |
| Browser support | Universal | All browsers |
Comparison
⚖️ <samp> vs <code> vs <kbd>
| Element | Represents | Example |
|---|---|---|
<samp> | Program output | Hello, World! |
<code> | Source code | console.log() |
<kbd> | Keyboard input | Enter |
Reference
🧰 Attributes
The <samp> tag has no tag-specific attributes. Use global attributes like class and style to customize the appearance of sample output.
attributes.html
<samp class="highlight" style="color: #0066cc;">
Your Styled Sample Output Here
</samp>class CSSApply a class for reusable sample output styling.
class="highlight"style InlineInline color, font, or background overrides.
style="color: #0066cc"title TooltipExtra context about the sample output.
title="Terminal output"Hands-On
Examples Gallery
Display program output and sample data with samp in tutorials and documentation.
📚 Common Use Cases
The <samp> tag represents computer code output and sample data within the context of a document.
Displaying Code Output
The primary purpose of samp is to represent the output of computer code or commands.
displaying-code-output.html
In this example, the output of the command is <samp>Hello, World!</samp>.Sample Data Representation
Use samp when presenting sample data, such as mock user input or system responses.
sample-data-representation.html
<samp>User Input: John Doe</samp>A11y
♿ Accessibility
- Use samp semantically — Distinguish program output from source code and keyboard input.
- Provide surrounding context — Explain what command or program produced the sample output.
- Do not rely on monospace alone — The
sampelement carries semantic meaning beyond font styling. - Use pre for long output — Multi-line terminal dumps belong in
pre, not inlinesamp.
🧠 How <samp> Works
1
Author wraps output text
Place sample program results inside samp tags.
Markup
2
Browser renders monospace
Default styles display samp in a monospace font.
Render
3
CSS enhances presentation
Optional class and style improve visual distinction.
Style
=
Clear sample output
Readers see program results distinguished from code and keys.
Compatibility
Browser Support
The <samp> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Sample output everywhere
All browsers render <samp> with default monospace styling.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<samp> tag 100% supported
Bottom line: Use <samp> confidently for sample output in any browser.
Wrap Up
Conclusion
Mastering the <samp> tag empowers web developers to effectively showcase sample output and data within HTML documents. By following best practices and considering browser compatibility, you can enhance the clarity and visual appeal of your content.
Pro Tips
💡 Best Practices
✅ Do
- Use
sampfor program output and sample data - Ensure content accurately represents sample output
- Apply CSS for better presentation
- Pair with
codewhen showing input and output
❌ Don’t
- Use
sampfor source code snippets - Use
sampfor keyboard key names - Put long multi-line output in inline
samp - Rely on monospace styling without semantic markup
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <samp>
Bookmark these before you mark sample output.
6
Core concepts 01
Output
Program results.
Purpose 02
Not code
Use code tag.
Distinction 03
Not kbd
Keys use kbd.
Distinction 04
Tutorials
Docs and blogs.
Context 05
CSS Style
class / style.
CSS 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It marks sample output from programs, commands, or systems.
samp is program output. code is source code.No tag-specific attributes. Global attributes like
class and style apply.Use
pre for multi-line block output. Use samp for inline sample text.Yes. Full support in every major browser.
Display Sample Output
Practice <samp> for program output and sample data in the Try It editor.
About the author
6 people found this page helpful