<code> 和 <var> 不能嵌套，只能相邻使用：<code> 包裹可执行代码文本，<var> 单独标记变量名、参数名或占位符；嵌套会破坏语法高亮与可访问性。
code 和 var 不能嵌套，但可以相邻组合
标签和标签语义不同，浏览器与语法高亮器（如 Prism、highlight.js）都要求二者严格分离：包裹可执行/可引用的代码文本，只标记变量名、参数名或占位符本身。嵌套会破坏 token 识别——比如const <var>count</var> = 42;中，高亮器看到的是普通文本count，不会加.variable类，也无法触发变量样式规则。
正确做法是让
包裹结构，<var>单独标出名字：</p> <pre class="brush:php;toolbar:false;">调用 <code>fetch(url
)，其中 url 应为有效字符串
常见错误组合及后果
这些写法看似“顺手”，实则干扰可访问性、高亮和维护：
<code>console.log(<var>msg</var>)</code> —— 屏幕阅读器可能先读“代码块开始”，再读“变量 msg”，逻辑断裂</li> <li><code><var id="timeout">ms</var>
后用document.getElementById('timeout').textContent想取 JS 变量值 —— 返回字符串"ms"，不是数值- —— name 属性值字面量就是"user_id"，后端收不到 user_id
什么时候该用 ，什么时候该用 <var></H3>
<p>判断依据只有一个：你在描述「一段可直接复制粘贴运行的文本」，还是在指代「某个名字本身」：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a>
<p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>用 <code>：函数名（<code>fetchUser）、完整调用（fetch('/api/data')）、环境变量名（DATABASE_URL）、CSS 自定义属性（--primary）
map(item)）
真实文档中推荐的组合模式
多数技术文档需同时呈现结构与语义，以下组合经实践验证无障碍友好且工具链兼容：
配置项说明：
将 <var>DATABASE_URL</var> 写入 <code>.env文件函数签名描述：
<var>fetchData</var>(endpoint,options)返回Promise<T>数学表达式：A = ½ × b × h，其中 b 表示底边长度
最易被忽略的一点：默认斜体只是 UA 样式，若项目 CSS 重置了 的 font-style，必须显式补上 font-style: italic 才能维持语义可辨识性——否则屏幕阅读器仍按变量读，视觉上却和普通文本无异。
