lang属性必须写在<html>标签上，如<html lang="zh-CN">，其他位置无效；它决定页面级语言，影响屏幕阅读器、SEO和翻译工具，错误设置会导致语音误读、翻译出错和搜索降权。
HTML里lang属性写在哪
必须写在<html>标签上，其他位置无效。浏览器靠这个判断整页默认语言，屏幕阅读器、搜索引擎、翻译工具都依赖它——不是可有可无的装饰。
常见错误是写在<body>或某个<div>里，比如<div lang="zh-CN">只能影响该元素内文本的语音朗读和断词，不改变页面级语言声明。
- 正确写法：
<html lang="zh-CN">（中文简体）或<html lang="en-US">（美式英语） - 如果页面含多语言混合内容，主语言仍用
<html lang>，局部切换用子元素的lang，如<p lang="ja">こんにちは</p> - 别写
lang="zh"这种模糊值——zh不被规范推荐，应明确到zh-CN、zh-TW或zh-HK
lang属性值怎么选才不踩坑
选错值会导致语音合成不准、自动翻译出错、甚至SEO识别失败。核心原则：按BCP 47标准写，优先用“语言-地区”组合，地区码非必需但强烈建议带上。
- 英语统一用
en开头：en-US（美式）、en-GB（英式），别用english或en_US（下划线非法） - 中文必须区分：
zh-CN（大陆简体）、zh-TW（台湾繁体）、zh-HK（香港繁体）——字体渲染、标点习惯、词典匹配都不同 - 小语种注意大小写：
fr-FR合法，FR-fr或fr_fr非法；pt-BR（巴西葡语）和pt-PT（葡萄牙葡语）不能混用
lang没设或设错会出什么问题
表面看页面照常显示，但背后链路已悄悄断裂：辅助技术误读、机器翻译乱套、搜索结果降权、甚至某些CDN或缓存策略失效。
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器把“行”（xíng）读成“行”（háng），因为没
lang="zh-CN"就默认按英文规则切音节 - Google可能把全中文页当“未标注语言”降权，尤其多语言站点中缺失
hreflang联动时 - Chrome自动翻译按钮不出现，或点了直接翻成日语——它信了你写的
lang="ja"，哪怕页面全是汉字 - 部分CSS伪类如
:lang(zh)无法匹配，导致针对中文的排版规则（如避头尾、标点挤压）失效
动态页面怎么安全更新lang属性
单页应用（SPA）或服务端模板渲染时，lang不能硬编码死。用户切换语言后，只改<html lang>还不够——得同步通知辅助技术并避免DOM重绘异常。
- JS修改时用
document.documentElement.lang = "zh-TW"，别用document.body.setAttribute() - 改完立刻触发
document.title = document.title（空赋值），强制屏幕阅读器重新读取根节点语言 - 服务端渲染（如Next.js、Nuxt）务必在HTML初始响应中就输出正确
lang，不要等JS执行后再补——首屏对SEO和无障碍最关键 - 避免在
lang里拼接变量：<html lang="{{ userLang }}">若userLang为空或含<script>会被XSS利用，需严格白名单过滤
zh就万事大吉，结果台湾用户看到的网页用简体字断行、拼音注音，连“软件”都被读成“ruǎn jiàn”而不是“ruǎn tǐ”。这问题不报错，但一上线就静默失效。 
