วิธีจัดรูปแบบ Output คอมพิวเตอร์ด้วยแท็ก samp ใน HTML

แท็ก <samp> (Sample Output) ใช้สำหรับแสดงตัวอย่าง output จากโปรแกรมคอมพิวเตอร์ terminal, console, log ไฟล์ ฯลฯ Browser แสดงเป็น monospace font โดยค่าเริ่มต้น

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML samp Tag</title>
</head>
<body>
  <p>When you run the command, you'll see:</p>
  <samp>
    $ npm install<br>
    added 50 packages in 2s<br>
    <span style="color: green">✓ Success</span>
  </samp>
  
  <p>Error message:</p>
  <samp style="color: #dc3545;">Error: ENOENT: no such file or directory</samp>
</body>
</html>

ผลลัพธ์

When you run the command, you'll see:

$ npm install added 50 packages in 2s ✓ Success

Error message:

Error: ENOENT: no such file or directory

การใช้งานร่วมกับ code/pre

<pre><code>$ <kbd>npm test</kbd>
<samp>PASS  test/example.test.js
  ✓ renders correctly (5ms)
  ✓ handles click (3ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total</samp></code></pre>

Semantic Tags สำหรับ Technical Content

Tag	วัตถุประสงค์	ตัวอย่าง
`<samp>`	Program output	`Hello World`
`<code>`	Source code	`console.log()`
`<kbd>`	User input (keyboard)	`Enter`
`<var>`	Variable	`x`
`<pre>`	Preformatted block	Multi-line code

CSS สำหรับ samp

samp {
  font-family: ui-monospace, SFMono-Regular, 'Fira Code', monospace;
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}