lang属性必须写在标签上且仅一次，因其是浏览器和辅助技术识别整页默认语言的唯一合法起点；写在或子元素无效，会导致语音合成、翻译、css及seo等功能失效。
lang 属性必须写在 标签上，且只能写一次——写错位置、写成 或重复添加，屏幕阅读器就可能“听不懂”页面语言。
为什么lang必须放在
浏览器和辅助技术（如 NVDA、VoiceOver）只认 上的 lang 作为整页默认语言依据。其他位置的 lang（比如加在 <div> 或 <code> 上）不会覆盖它，反而可能被忽略或引发歧义。
-
是唯一合法起点；这类写法无效，也不符合 W3C 验证 - 嵌套语言切换靠子元素
lang，比如<p lang="en">API</p>，但前提是根元素已设主语言 - 没设
lang时，系统会 fallback 到操作系统语言，中文用户打开英文文档可能被用中文音读出 “JavaScript”
lang值怎么写才合法
必须用 BCP 47 格式，不能写 chinese、zh_CN（下划线）、zh-china 这类非标写法——这些会导致翻译失败、CSS :lang() 不匹配、拼写检查不触发。
- 简体中文：用
zh-Hans（推荐）或zh-Hans-CN；zh-CN虽常见但语义不完整（未说明书写变体） - 繁体中文：用
zh-Hant或zh-Hant-TW；zh-TW易被误判为“台湾地区专属”，实际是书写体系问题 - 英语通用写法是
en，不需要加地域后缀；en-US和en-GB仅在需区分拼写/发音时使用 - 小语种务必查 IETF Language Subtag Registry，比如南非荷兰语是
af，不是afrikaans
lang影响哪些实际功能
它不只是给搜索引擎看的“装饰属性”，而是直接驱动多项底层行为，很多问题根源就在这里。
- 屏幕阅读器按
lang切换语音引擎：一段<span lang="ja">こんにちは</span>会被正确读成日语发音，否则可能逐字用中文音读 - 浏览器右键菜单是否出现“翻译成中文”：Chrome 仅在检测到明确
lang且与当前界面语言不同时才显示该选项 - CSS 的
hyphens: auto是否生效：该属性依赖lang值+浏览器对该语言的连字符支持，lang="zh"下基本无效果（中文不连字） - 拼写检查是否启用：Firefox 和 Safari 在
lang匹配已安装词典时才标红错词，lang="fr"但没装法语词典=不检查
多语言混排时容易踩的坑
很多人以为加个 lang 就万事大吉，但真实场景中嵌套逻辑和语义边界常被忽略。
- 代码块里的英文标识符（如
<code>fetch()）不该强制设lang="en"，应保持父级语言；必要时用translate="no"阻止翻译 -
<blockquote lang="en"></blockquote>合理，但<div lang="en"> 很可能是错的——<code>div无语义，无法传达“这段是英文内容”，应换用section或aside - 动态渲染内容（如 Vue/React 组件）若语言与主文档不同，必须在对应节点手动补
lang，服务端模板无法自动继承 - 第三方 SDK 插入的 DOM（如评论框、广告位）可能自带
lang，要检查是否冲突；冲突时以最内层有效，但最好统一清理
真正难的不是写对那一行 ，而是后续所有语言切换点都得有意识地维护语义层级——一个漏掉的 lang，可能让视障用户在关键操作按钮上听到错误发音。
