The <samp> element marks sample output from a computer program or script, distinguishing it semantically from <code> (source code) and <kbd> (user input).

Syntax

Running the script prints: <samp>Build succeeded in 2.3s</samp>

Deep Dive Course

**`<samp>`** represents text that a program actually **output** — a console log line, an error message, a terminal response — as opposed to `<code>` (the source code that produced it) or `<kbd>` (what a user types in). It's commonly used in documentation and tutorials to clearly show 'here's what you should see happen' after running a command.

1Understanding <samp>

`<samp>` represents text that a program actually output — a console log line, an error message, a terminal response — as opposed to <code> (the source code that produced it) or <kbd> (what a user types in). It's commonly used in documentation and tutorials to clearly show 'here's what you should see happen' after running a command.

💡

In a tutorial that says 'run this command, and you'll see this output', use <code> for the command and <samp> for the resulting output — they look the same (monospace) but mean different things.

editor.html

<p>Run <code>npm test</code> and you should see: <samp>✓ 12 tests passed</samp></p>

localhost:3000

2Practical Example

Here is a real-world application of <samp> showing how it is used in production HTML.

editor.html

<!-- Multi-line terminal output -->
<pre><samp>Compiling...
Build succeeded in 2.3s
Server running at http://localhost:3000</samp></pre>

localhost:3000

3Best Practices

Follow these guidelines when working with <samp>:

1. Use <samp> specifically for program/terminal output shown to the reader

2. Pair it with <code> (for the command) and <kbd> (for user input) in tutorials for clarity

3. Use <pre><samp> together when the output spans multiple lines

⚠️

Tip: In a tutorial that says 'run this command, and you'll see this output', use <code> for the command and <samp> for the resulting output — they look the same (monospace) but mean different things.

editor.html

<p>Run <code>npm test</code> and you should see: <samp>✓ 12 tests passed</samp></p>

localhost:3000

Examples

Example 01Basic Usage

<p>Run <code>npm test</code> and you should see: <samp>✓ 12 tests passed</samp></p>

Example 02Advanced Example

<!-- Multi-line terminal output -->
<pre><samp>Compiling...
Build succeeded in 2.3s
Server running at http://localhost:3000</samp></pre>

Best Practices

Use specifically for program/terminal output shown to the reader
Pair it with (for the command) and (for user input) in tutorials for clarity

Use together when the output spans multiple lines

`Interview Question`

In a tutorial showing a terminal command and its result, which elements would you use for each part?▼

Hint: Think about the three roles: the command, the person typing it, and what the computer prints back.

The command itself (e.g. `npm install`) is typically <code>, since it's a piece of syntax. If you're instructing the reader to physically type it, <kbd> is more precise for that user-input role. Whatever the terminal prints back afterward (build logs, results, errors) is <samp>, since that's the program's actual output, not code or user input.

`Exercises`

EasyPractice using <samp> in a real scenario.

View Solution

<p>Run <code>npm test</code> and you should see: <samp>✓ 12 tests passed</samp></p>

`Frequently Asked Questions`

In a tutorial showing a terminal command and its result, which elements would you use for each part?▼

The command itself (e.g. `npm install`) is typically , since it's a piece of syntax. If you're instructing the reader to physically type it, is more precise for that user-input role. Whatever the terminal prints back afterward (build logs, results, errors) is , since that's the program's actual output, not code or user input.

`Related Functions`

code-tagvar-tagpre-tag