lang属性必须写在<html>标签上才生效，浏览器、屏幕阅读器、搜索引擎和Chrome翻译按钮仅在解析HTML初始阶段读取该声明；写在<body>、<div>或用JS动态修改均无效。
lang属性必须写在标签上才生效
浏览器、屏幕阅读器（如 NVDA、VoiceOver）、搜索引擎和 Chrome 翻译按钮，只在解析 HTML 最初阶段读取 <html lang="zh-CN"> 这个声明。写在 <body>、<div> 或用 JS 动态改 document.documentElement.lang，都无效——它们根本不会被当作“页面语言”识别。
常见错误现象：
-
<body lang="zh-CN">：仅影响该元素内极少数 CSS:lang()匹配和断词，对语音引擎、翻译入口、SEO 完全无作用 -
<meta http-equiv="Content-Language" content="zh-CN">：HTML5 已废弃，所有现代浏览器静默忽略 -
document.documentElement.lang = "en-GB"：页面已加载，语音库不重载，CSS 不重计算，翻译按钮不刷新
地区语言代码必须严格符合 BCP 47 规范
写错格式会被浏览器或读屏软件静默忽略，当成“未知语言”处理。比如 zh_china、Chinese、en_US、EN-us 全部非法。
正确写法要点：
立即学习“前端免费学习笔记（深入）”；
- 中文简体优先用
zh-CN（不是zh或zh-Hans）：兼容性最稳，拼音、声调、标点排版、字体回退全支持 - 英文必须用
en-US或en-GB（不能用english或下划线） - 法语、葡萄牙语等小语种大小写敏感：
fr-FR合法，FR-fr不合法 -
lang=""比不写还糟：明确告诉辅助工具“语言未知”，可能导致整页按英文规则朗读中文
多语言混排时，子元素 lang 要显式标注
<html lang="zh-CN"> 只管主语言，嵌入的外文内容必须单独加 lang，否则屏幕阅读器仍用中文规则硬读——比如把 “API” 读成“阿皮”，把法语引文标点停顿全错。
实用标注方式：
- 单个术语：
<span lang="en">API</span> - 整段英文：
<p lang="en">This is a code example.</p> - 引文类内容优先用语义化标签：
<blockquote lang="fr">Merci</blockquote> - 代码块注释建议用
lang="en"（不是lang="bash"），因为浏览器和语法高亮工具更认语言代码而非 MIME 类型 - 避免滥用：
<div lang="en">包裹多个段落——语义不清，干扰父级:lang(zh)CSS 匹配
动态页面（React/Vue/SSR）必须在首屏 HTML 中注入真实值
客户端渲染（CSR）无法靠 JS 补救。如果首屏 HTML 里 <html lang="zh-CN"> 是错的，后续所有链路（语音、翻译、SEO）都失效。
实操方案：
- Next.js：在
app/layout.tsx中通过localeprop 注入，确保 SSR 输出真实<html lang="en-US"> - Nuxt：用
useLocaleHead()，它会在服务端生成正确lang - 纯前端 SPA：若需多语言，必须用 SSR 或静态生成（SSG）产出不同
lang的 HTML 入口文件，不能靠 JS patch
最容易被忽略的一点：语言切换时，lang 必须同步更新。只改文案、不改 <html lang>，会导致语音引擎继续用旧语言模型，甚至触发浏览器把中文页强行翻译成英文——而用户根本没点翻译按钮。
