💻 Chapter 15: Code, Monospace & Preformatted Text

The samp Element for Sample Output

Marking up computer system outputs, terminal logs, compiler errors, and interactive CLI sessions.

LEARNING OBJECTIVES ⌵

Understand the semantic purpose of <samp> according to the WHATWG specification.
Differentiate between <code> (program code), <kbd> (user input), and <samp> (computer output).
Combine <pre>, <samp>, and <kbd> to build authentic, interactive CLI terminal simulations.
Style terminal consoles with realistic command prompts, ANSI color accents, and error streams.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine speaking into an intercom at a secure research facility:

You speak: "Security, open bay door 4." (User Input)
The electronic voice on the speaker responds: "Access granted. Door 4 opening in 3... 2... 1..." (System Output)

In software and web documentation, this dialogue happens constantly. A developer types a command into their terminal, and the operating system or compiler prints back lines of text, status reports, or error messages.

The <samp> (Sample Output) element represents that second voice: the text emitted by a computer program, script, terminal shell, or operating system. It is the quote from the computer.

+-----------------------------------------------------------------------------------+
| Terminal Conversation:                                                            |
|                                                                                   |
|  $ npm run build              <--- User typed this (<kbd>)                        |
|                                                                                   |
|  > Building bundle...                                                             |
|  > Compiled in 240ms          <--- Computer printed this (<samp>)                 |
|  > Bundle size: 42.1 kB                                                           |
+-----------------------------------------------------------------------------------+

Technical Deep Dive & Specifications

WHATWG Specification & Semantic Definition

The <samp> element represents (sample) output from a computer program or computing system.

Content model: Phrasing content.
Default display: inline.
Default font: monospace.

Semantic Triad: `<code>` vs `<kbd>` vs `<samp>`

Element	Semantic Identity	Real-World Metaphor	Concrete Example
`<code>`	Programmatic syntax / source code	The blueprint	`const sum = (a, b) => a + b;`
`<kbd>`	User input / keystrokes	The human speaking	`git push origin main`
`<samp>`	System output / compiler results	The computer answering	`fatal: remote origin already exists.`

Nesting `<samp>` and `<kbd>` in Interactive CLI Sessions

The WHATWG specification explicitly recommends nesting <samp> and <kbd> to model conversational CLI sessions:

<pre><samp><span class="prompt">solanki@devbox:~$</span> <kbd>ping -c 1 localhost</kbd>
PING localhost (127.0.0.1) 56(84) bytes of data.
64 bytes from localhost: icmp_seq=1 ttl=64 time=0.038 ms

--- localhost ping statistics ---
1 packets transmitted, 1 received, 0% packet loss</samp></pre>

In this structure:

<pre> preserves exact spaces and line breaks.
<samp> wraps the overall terminal session output.
<kbd> wraps the command typed by the user (ping -c 1 localhost).

+-------------------------------------------------------------------------------+
| <pre>                                                                         |
|   <samp>                                                                      |
|     $ <kbd>git status</kbd>                                                   |
|     On branch main                                                            |
|     Your branch is up to date with 'origin/main'.                             |
|   </samp>                                                                     |
| </pre>                                                                        |
+-------------------------------------------------------------------------------+

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 11–20: Encapsulates the terminal window within .terminal-card using a deep slate background.
Line 23–31: Builds the classic macOS 3-dot window title bar (red, yellow, green).
Line 57–72: Combines <pre> and <samp> to host the complete terminal output log.
Line 57: Nests <kbd class="user-cmd">npm run test</kbd> directly inside <samp> to mark up the exact command the user executed.
Line 63–71: Uses CSS color helper classes (output-success, output-dim) to emulate ANSI terminal color codes for passed tests and timestamps.

Expected Browser Render Output

A dark IDE terminal window with window controls, showing the blue terminal prompt, yellow user input npm run test, and green/gray test summary output.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Terminal Sample Output</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #0f172a;
      color: #e2e8f0;
      padding: 2rem;
    }

/* Terminal Console Window */
    .terminal-card {
      max-width: 720px;
      margin: 0 auto;
      background-color: #1e1e2e;
      border: 1px solid #313244;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

/* Top Mac-style Traffic Light Bar */
    .terminal-bar {
      background-color: #181825;
      padding: 0.6rem 1rem;
      display: flex;
      gap: 6px;
      border-bottom: 1px solid #313244;
    }

.circle { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .red { background: #f38ba8; }
    .yellow { background: #f9e2af; }
    .green { background: #a6e3a1; }

/* Terminal Body */
    pre.terminal-screen {
      margin: 0;
      padding: 1.25rem;
      font-family: "JetBrains Mono", Consolas, monospace;
      font-size: 0.9rem;
      line-height: 1.5;
      color: #cdd6f4;
      overflow-x: auto;
    }

.prompt-symbol { color: #89b4fa; font-weight: bold; }
    .user-cmd { color: #f9e2af; font-weight: 600; }
    .output-success { color: #a6e3a1; }
    .output-error { color: #f38ba8; }
    .output-dim { color: #6c7086; }
  </style>
</head>
<body>
  <div class="terminal-card">
    <div class="terminal-bar">
      <span class="circle red"></span>
      <span class="circle yellow"></span>
      <span class="circle green"></span>
    </div>
    <pre class="terminal-screen"><samp><span class="prompt-symbol">user@workstation:~/project$</span> <kbd class="user-cmd">npm run test</kbd>

<span class="output-dim">> vite-app@1.0.0 test</span>
<span class="output-dim">> vitest run</span>

<span class="output-success"> ✓ src/math.test.ts (4 tests) 12ms</span>
<span class="output-success"> ✓ src/auth.test.ts (2 tests) 28ms</span>

<span class="output-success"> Test Files  2 passed (2)</span>
<span class="output-success">      Tests  6 passed (6)</span>
<span class="output-dim">   Start at  02:15:20</span>
<span class="output-dim">   Duration  412ms (transform 48ms, setup 0ms, collect 32ms, tests 40ms)</span></samp></pre>
  </div>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Git Merge Conflict Console

Instructions:

Build a mock terminal session for an engineer encountering a Git merge conflict.
Mark up the user command (git merge feature/auth-redesign) using <kbd>.
Mark up the system output (Auto-merging files, CONFLICT notices, Automatic merge failed) using <samp>.
Wrap everything inside a responsive <pre> container.
Highlight the word CONFLICT in warning red using CSS.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Git Conflict Terminal</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #0b0f19;
      color: #f1f5f9;
      padding: 2rem;
      max-width: 700px;
      margin: 0 auto;
    }

    .terminal-box {
      background-color: #111827;
      border: 1px solid #1f2937;
      border-radius: 8px;
      padding: 1.25rem;
      overflow-x: auto;
    }

    pre {
      margin: 0;
    }

    samp {
      font-family: "Fira Code", Menlo, monospace;
      font-size: 0.9rem;
      line-height: 1.6;
      color: #9ca3af;
      display: block;
    }

    kbd {
      font-family: inherit;
      color: #67e8f9;
      font-weight: bold;
    }

    .conflict-tag {
      color: #ef4444;
      font-weight: bold;
      background-color: rgba(239, 68, 68, 0.1);
      padding: 0.1em 0.3em;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h2>Git Merge Execution</h2>

  <div class="terminal-box">
    <pre><samp><span style="color:#10b981;">❯</span> <kbd>git merge feature/auth-redesign</kbd>
Auto-merging src/app.ts
<span class="conflict-tag">CONFLICT (content)</span>: Merge conflict in src/app.ts
Automatic merge failed; fix conflicts and then commit the result.</samp></pre>
  </div>
</body>
</html>

Why this works:

The overall terminal output is wrapped in <samp>.
The user's input command is distinctly marked up with <kbd>.
The <pre> container maintains the exact multi-line output layout.
The conflict-tag visually alerts developers to the critical failure message.

⚠️ Common Pitfalls

Using <code> for System Error Messages: Programmers often mark up 404 Not Found or NullPointerException with <code>. The semantic element for output emitted by a program is <samp>.
Forgetting <pre> for Multi-Line Logs: <samp> is an inline phrasing element. If you have 20 lines of server logs and omit <pre>, they will collapse into one unreadable horizontal line.
Using <samp> for Interactive Form Fields: <samp> is for quoting already-produced output. For live dynamic calculations inside a form, use <output>.

💡 Pro Tips

Inline Sample Badges: In API documentation, you can use inline <samp> to display HTTP status returns directly in prose: "The API responds with <samp>429 Too Many Requests</samp> if the rate limit is exceeded."
Accessibility Role Mapping: In screen readers, <samp> text is exposed as computer output. When rendering live streaming logs over WebSockets, pairing <samp> with aria-live="polite" ensures assistive devices announce incoming log lines smoothly.

📌 Key Takeaways

<samp> represents sample output from a computer program, script, CLI tool, or operating system.
<code> = Source code, <kbd> = User keystrokes, <samp> = Computer output.
Wrap <samp> in <pre> when displaying multi-line server logs or stack traces.
Nest <kbd> inside <samp> to authentically represent an interactive CLI session where a user inputs commands and the machine responds.
By default, <samp> is an inline element rendered in the user-agent monospace font.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which HTML element is semantically designated for displaying compiler warning messages and stack traces?

Topic: HTML Fundamentals

? Question 2 / 3

When creating a mock terminal window displaying a user running a script and seeing results, how should `<samp>` and `<kbd>` be combined?

Topic: HTML Fundamentals

? Question 3 / 3

What is the default CSS display property of the `<samp>` element?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WHATWG Specification & Semantic Definition

Semantic Triad: <code> vs <kbd> vs <samp>

Nesting <samp> and <kbd> in Interactive CLI Sessions

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Git Merge Conflict Console

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which HTML element is semantically designated for displaying compiler warning messages and stack traces?

When creating a mock terminal window displaying a user running a script and seeing results, how should <samp> and <kbd> be combined?

What is the default CSS display property of the <samp> element?

Semantic Triad: `<code>` vs `<kbd>` vs `<samp>`

Nesting `<samp>` and `<kbd>` in Interactive CLI Sessions

When creating a mock terminal window displaying a user running a script and seeing results, how should `<samp>` and `<kbd>` be combined?

What is the default CSS display property of the `<samp>` element?