samp
Represents sample or quoted output from a computer program. Rendered in monospace font.
Description
The <samp> element represents sample output from a computer program. VB styles it in var(--font-mono) at 0.9em. It is part of VB's code-family elements alongside <code>, <kbd>, and <var>, and is automatically protected from machine translation via the i18n system.
When to Use
- Command output: Results from terminal commands
- Error messages: System error text
- Status messages: Build output, test results
- API responses: Showing what a system returns
When NOT to Use
Examples
Inline output
<p>The command returned: <samp>Hello, World!</samp></p><p>Error message: <samp>File not found: config.json</samp></p>
Block output
<pre><samp>$ npm installadded 125 packages in 3.2s $ npm run buildBuild completed successfully.Output: dist/bundle.js (45.2 KB)</samp></pre>
Mixed with kbd
Pair <kbd> (user input) with <samp> (system response) to document command-line workflows:
Input + output
<p>Type <kbd>git status</kbd> and the system responds with<samp>On branch main</samp>.</p>
CSS Reference
samp CSS
samp { font-family: var(--font-mono); font-size: 0.9em;} /* samp is never machine-translated */code, kbd, samp, pre, var { translate: no;}
Unlike <code>, <samp> has no background or padding — output text should feel like raw system text, not highlighted code.
Accessibility
- Screen readers read
<samp>as regular text — the monospace styling is visual only - Provide context: "The system responded with..." or "Error:" before the output
Related
<code>— For source code the user writes<kbd>— For keyboard input from the user<var>— For variables in code or math- Internationalization — Translation protection for code-family elements