用于标记程序或系统的输出内容,如终端打印、错误消息、api 返回的 json; 用于表示源代码或机器可读文本,如函数定义、html 片段、sql 查询;二者语义不可互换,影响可访问性、seo 和工具解析。

和 都是 HTML 中语义明确的内联标签,但它们承担不同角色:前者专用于标记程序或系统的输出内容,后者则专用于表示计算机源代码或其他机器可读文本。混淆使用会削弱文档语义结构,影响可访问性、SEO 及未来工具(如代码分析器、屏幕阅读器)的理解。
核心语义分工
语义差异不是样式问题,而是意图表达:
-
:描述“人写的、供机器执行的指令”,比如函数定义、HTML 片段、SQL 查询语句; - :描述“机器运行后产生的结果”,比如终端打印、错误消息、API 返回的 JSON 字符串、命令行输出片段。
典型使用场景对比
实际写作中,关键看这段文本在上下文中是输入还是输出:
- 写
<div class="container"> —— 用 <code><code>,这是开发者编写的 HTML 源码; - 显示终端提示:npm install --save react —— 用 ,这是用户键入后系统回显的命令本身(非执行逻辑,而是呈现行为);
- 展示运行结果:{"status":"ok","count":42} —— 用 ,这是 API 调用返回的原始响应体;
- 展示一段 JS 函数:
function greet(name) { return `Hello, ${name}`; }—— 用<code>,这是可被解释执行的代码逻辑。 - 不要用
<code>包裹错误信息(如Error: ENOENT),它不是代码,而是运行结果,应使用 ; - 避免嵌套滥用:例如
<code><samp>output</samp>是语义冲突的——输出不是代码; - 若需强调某段输出中的变量名,可用 嵌套在 内,如 File not found: filename.txt;
- 所有现代浏览器均原生支持这两个标签,无需额外 polyfill。
- 屏幕阅读器可能对 添加“示例输出”提示,对
提示“代码片段”,帮助视障开发者区分上下文; - 静态站点生成器或文档提取工具(如 DocFX、Sphinx 插件)能基于语义自动归类代码块与运行日志;
- 未来浏览器或 IDE 插件可能为 添加复制响应内容、模拟终端粘贴等快捷操作。
样式与兼容性注意事项
两者默认都渲染为等宽字体,但语义不可互换:
辅助工具与可访问性价值
正确使用带来实际好处:











