samp 标签语义上表示程序实际输出结果,如终端显示的“File not found”,区别于 code(源码)和 pre(纯格式容器);常与 var、kbd、pre 等组合使用以明确输入/输出关系及语义粒度。

samp 标签用于标记计算机程序的**实际输出结果**,语义上表示“sample output”(示例输出),不是代码本身,也不是用户输入,而是程序运行后屏幕上显示的内容。
明确区分:samp 不是 code,也不是 pre
很多人混淆 samp 和 code 或 pre。关键区别在于:
-
<samp>Hello, world!</samp>表示这是程序执行后打印到终端/控制台的文本结果; -
<code>printf("Hello, world!");</code>表示源代码片段; -
<pre>是纯格式容器,无语义,仅保留换行与空格,不表达内容类型。
适用典型场景
当网页需要准确传达“这是程序跑出来的结果”,而非“这是怎么写的”或“这是怎么输的”,就该用 samp:
- 命令行工具执行后的返回信息,如 File not found: config.json;
- 脚本运行的 stdout 输出,如 Processed 127 records in 0.42s;
- API 响应体中的原始字符串值(非 JSON 结构本身),如 {"status":"ok"} 中的 ok 字段值(若强调它是返回值而非结构);
- 错误消息原文,如 TypeError: Cannot read property 'length' of undefined。
配合其他标签提升可读性与语义完整性
单独用 samp 往往不够清晰,建议组合使用:
- 用
<var>标记变量名,再套samp表示其值:<samp>The value of <var>count</var> is 42</samp>; - 在
<pre><code>块中嵌入samp,只对其中的输出部分标注语义,例如:<pre><code>$ node script.js<br><samp>Result: 1984</samp></code></pre>; - 搭配
<kbd>区分输入与输出:<kbd>ls -l</kbd> → <samp>total 8<br>-rw-r--r-- 1 user staff 123 Jun 22 20:52 index.html</samp>。
样式与可访问性注意点
浏览器默认将 samp 渲染为等宽字体,但不应依赖默认样式来传达语义:
- 避免仅靠 CSS 改变字体来暗示“这是输出”,必须用
samp标签确保语义正确; - 屏幕阅读器通常不会特别朗读
samp的语义,但它会影响 HTML 文档结构树,有助于自动化工具(如爬虫、验证器、无障碍检测器)识别内容角色; - 如果输出含多行,建议包裹在
pre内并保持samp的语义边界,不要把整块输出都塞进一个samp标签里——语义粒度要匹配实际含义。


















