标签仅用于内联短代码，如函数名或命令；多行代码须嵌套在中，二者语义与用途严格区分，错误使用将导致可访问性与格式问题。

<code> 标签不是用来“显示代码块”的万能容器，它只表示**一段短的、内联的计算机代码**，比如函数名、变量名、命令或一小段表达式。把它当 <pre class="brush:php;toolbar:false;"></pre> 或 <div> 用，会出语义错误，也容易被屏幕阅读器误读。 <h3>什么时候该用 <code><code> 而不是 <pre class="brush:php;toolbar:false;"></pre>

关键看内容长度和格式需求：

• <code> 必须是**行内元素**，适合包裹像 console.log()、fetch()、git commit 这种嵌在句子中的词
• <pre class="brush:php;toolbar:false;"></pre> 是块级元素，保留换行和空格，适合多行代码片段，比如一段 JSON 或函数定义
• 如果硬把多行代码塞进 <code>，换行会失效，缩进全塌，CSS 也难控制

<code> 和 <tt></tt>、<kbd></kbd> 的区别

老教程里常混用，但语义完全不同：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <tt></tt> 是过时标签（HTML5 已废弃），纯为“打字机字体”视觉效果，无语义，不该再用
• <kbd></kbd> 表示用户**要输入的内容**，比如 <kbd>Ctrl+C</kbd>，不是程序代码
• <code> 专指**机器可执行的代码文本**，如 document.querySelector()、os.path.join()

配合 <pre class="brush:php;toolbar:false;"></pre> 使用才是常见正解

想展示一段带缩进、换行的真实代码？正确组合是：<pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>

• <pre class="brush:php;toolbar:false;"></pre> 负责保留格式（空格、换行）
• <code> 负责声明这段内容是“计算机代码”，提升可访问性和 SEO
• 现代语法高亮库（如 Prism.js、highlight.js）也依赖这个嵌套结构识别代码语言
• 示例：

  <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="js">function hello() {
    return "world";
  }</code>

最容易被忽略的是：单独一个 <code> 没法解决多行、缩进、语言标识问题；而滥用它替代 <pre class="brush:php;toolbar:false;"></pre>，会让代码在无障碍场景下失去上下文。语义对了，样式和功能才好接得上。