标签仅用于标记真实出现在可执行代码中的片段,如变量名、函数调用等;若仅为示意或抽象概念(如“用户名变量”),不应使用。

code 标签不是用来标记“变量概念”的
<code> 是语义化标签,表示一段**计算机可执行的代码片段**,比如函数调用、命令行输入、实际写在源码里的标识符。它不负责表达“这个单词在程序里是变量”这种抽象含义——HTML 本身没有变量语义。如果你只是想把 username 这个词标成“看起来像代码”,那用 <code>username 没问题;但若想说明“此处 username 是 JavaScript 中声明的变量”,就得靠上下文或额外注释,<code> 自身做不到。
什么时候该用 code 包裹变量名
只在以下情况用 <code>:该变量名真实出现在代码中,且你正在展示代码样例或引用具体实现。
- 文档中解释
fetch()的init参数时,写init.method—— 因为这是对象属性访问的真实写法 - 教程里说“把
response赋值给data”,其中response和data都是实际出现在示例代码里的变量名 - 错误信息里出现的变量,如
ReferenceError: count is not defined,其中count必须用<code>
反例:文章里写“用户输入的值存在变量里”,后面跟一个 inputValue —— 如果这行没上下文代码,纯属示意,那它不该套 <code>,用 或普通文本更合适。
别和 var / span / em 混用
有人会想:<var></var> 标签是不是专为变量设计?是,但它已废弃(HTML5 不推荐),浏览器支持弱,SEO 和可访问性也不好,**不要用**。也别用 <span class="var"></span> 自己模拟——除非你在写语法高亮器,否则纯属增加复杂度。
- 需要强调语义?用
<em></em>表示重音,或<dfn></dfn>定义术语(比如首次提state时用<dfn>state</dfn>) - 要统一样式?CSS 里给
code单独设字体和背景,足够清晰 - 担心歧义?加一句“如下面代码中的
items”来锚定上下文
嵌套与转义容易出错
如果变量名里含 HTML 特殊字符(比如 user-name、obj[key]),直接写进 <code> 会触发解析或渲染异常。
-
<code>user-name✅ 安全(连字符无害) -
<code>obj[key]❌ 错误:方括号会被浏览器忽略或报错,必须转义为[和],即<code>obj[key] <code><div> ❌ 更危险:尖括号必须写成 <code><div>最稳妥做法:所有动态插入的变量名,先做 HTML 实体转义再塞进
实际写文档时,变量要不要加<code>;静态内容则手动检查特殊字符。<code>取决于它是否作为“可运行代码的一部分”被引用——不是看它是不是变量,而是看它有没有“出现在代码里”。这点最容易被忽略。











