Interactive Tutorial Transcript
The <samp> tag represents sample output from a program or system. Browsers typically render it in a monospace font. Use it for terminal output, computer messages, or example output in documentation.
<samp>
The <samp> tag is semantic: it tells users and assistive tech that the content is sample output, not code to type. Use <code> for code snippets; use <samp> for output. Common in tutorials: 'When you run the command, you see <samp>Hello</samp>.'
<p>The output was <samp>Hello, world!</samp></p>
Common use cases: terminal output, program messages, example output in docs. Pair <kbd> for keyboard input with <samp> for output. Browsers often style <samp> with a monospace font; you can override with CSS.
<p>Type <kbd>run</kbd>. You see <samp>Done.</samp></p>
In the browser, content inside <samp> appears in a monospace style. Use <samp> when the meaning is 'this is sample output from a program,' not 'this is code to copy.' That distinction helps accessibility and SEO.
<p>The output was <samp>Hello, world!</samp></p>
Checkpoint: Which element marks sample output from a program?
<samp>output</samp>
Correct! The <samp> tag marks sample output. Use <code> for code snippets; use <samp> for the output that a program or system produces.
<samp>output</samp>
Now it's your turn. Use <samp> for semantic sample output in docs and tutorials. Complete the challenges below to master the <samp> tag!