lang属性必须写在标签上，如，写在或中无效；切换语言时需动态更新document.documentelement.lang；双语混合内容需用等局部标注。

lang 属性必须写在 标签上

浏览器和屏幕阅读器只认 这种顶层声明，写在 或某个 <div> 里完全无效。很多初学者把 <code>lang 当成普通样式属性，随手加在段落或按钮上，结果搜索引擎不识别、语音朗读用错发音规则。

正确写法只有这一种：

或者英文页用

。注意：地区码（如 CN、US）不是必须的，但加上更准确；zh 和 zh-CN 在多数场景下表现一致，但某些字体渲染或翻译插件会区分。

切换语言时不要删掉 lang，而是动态更新它

多语言网页常犯的错是：用户点“English”后，只改了文字内容，却没改 的 lang 值。这会导致浏览器仍按中文规则处理标点间距、连字（ligature）、数字排版，甚至影响 CSS 的 :lang(en) { ... } 选择器生效。

用 JavaScript 切换时，直接操作 document.documentElement.lang：

document.documentElement.lang = "en-US";

而不是用 innerHTML 重写整个 标签——那样会触发页面重载或丢失状态。

• 别用 setAttribute("lang", ...)，虽然能工作，但不如直接赋值语义清晰
• 如果用了 i18n 库（比如 i18next），确认它是否自动同步更新 lang ——多数默认不干这事
• 服务端渲染（SSR）页面，lang 必须随语言模板一起输出，不能全靠前端补

双语混合内容要用 lang 局部标注

一句中文里夹一个英文术语（比如“请打开 Terminal”），光靠顶层 不够。屏幕阅读器会按中文规则读 Terminal，发音可能奇怪。这时得给外文词单独加 lang：

Wechat HTML Publisher

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

下载

<p>请打开 <span lang="en">Terminal</span></p>

注意：lang="en" 就够了，不用写 en-US ——除非你明确需要美式拼写规则（比如 color vs colour）；<span></span> 不是唯一选择，<em></em>、<code> 等语义合适的标签也行，关键是带 lang 属性。

• 别滥用 lang：整段英文内容直接包在 <section lang="en"></section> 里，比每个单词都加 span 更合理
• 避免嵌套冲突：比如父级 lang="zh"，子级 lang="ja"，再里面又 lang="en" ——虽然合法，但可读性和维护性变差

验证 lang 是否生效的三个简单方法

写完别光信自己没写错。最直接的验证方式就三条：

• 右键 → “查看页面信息”（Firefox）或开发者工具 → Elements 面板，看 标签上有没有 lang 属性及其值
• 打开 Chrome 的无障碍检查器（DevTools → Lighthouse → Accessibility audit），搜 “language” ——若提示 “html element does not have a lang attribute”，说明漏写了
• 用 NVDA 或 VoiceOver 朗读页面，听外文词是否切换发音：中文页里 <span lang="en">API</span> 应该读成 /ˌeɪ.piːˈaɪ/，而不是生硬的“阿皮”

真正容易被忽略的是：语言声明不是“写一次就完事”的静态配置，它得跟着内容走、跟着用户选的语言走、还得在 SSR 和 CSR 场景下保持一致。漏掉任意一环，对辅助技术用户就是实际障碍。