必须写在<html>标签上，否则屏幕阅读器、翻译按钮、SEO和CSS :lang()均失效；zh-CN最稳妥，明确简体中文与中国大陆规范，兼容性最佳。
必须把 lang 写在 <html> 标签上，否则屏幕阅读器、翻译按钮、SEO 和 CSS :lang() 都可能失效。
lang 属性只能写在 <html> 标签上
浏览器和辅助技术只认这个位置的 lang 值作为整页语言依据。写在 <body>、<div> 或用 JS 动态改 document.documentElement.lang，对已加载页面无效——NVDA、JAWS、Chrome 翻译按钮都看不到。
- 正确：
<html lang="zh-CN"> - 错误：
<body lang="zh-CN">（不被解析为文档语言） - 错误：
<meta http-equiv="content-language" content="zh-CN">（HTML5 已废弃，浏览器忽略） - 错误：
<html lang="Chinese">（非 BCP 47 标准，被当无效值）
中文该用 zh-CN 还是 zh-Hans 或 zh
三者语义不同，兼容性差异明显，选错会影响断词、字体回退、CSS 匹配甚至 SEO：
-
zh-CN：最稳妥。明确“简体中文 + 中国大陆规范”，Chrome、Safari、NVDA 支持最稳，CMS 和翻译插件默认认它 -
zh-Hans：强调“简体字”，不绑定地域，适合港澳台用户也用简体的场景；但部分旧版 Safari 的:lang(zh)匹配不准 -
zh：太宽泛，不区分简繁、地域，Google Search Console 可能报“未指定语言”，IE9+ 虽支持但不推荐
除非有明确国际化策略（如同时服务简体/繁体用户且需独立字体控制），否则直接用 zh-CN 最省心。
立即学习“前端免费学习笔记（深入）”；
多语言混排时怎么局部标注
局部语言切换不是靠 <div lang="en">，而是要满足两个条件：语义合理 + 元素级显式声明。
- 英文引文用
<blockquote lang="en">，法文书名用<q lang="fr">，日文术语用<span lang="ja"> - 避免
<div lang="en">——<div>没有语义，读屏软件不把它当“语言单元”处理 -
<title>里无法嵌套标签，所以多语言标题无法局部标注；属性值（如alt）同理，目前无标准解法
动态页面中设置 lang 容易踩的坑
服务端渲染或前端路由切换时，lang 值若没同步更新，会导致语音朗读错、翻译逻辑乱、CSS 引号样式异常：
- Next.js/Nuxt：从路由参数或 i18n 上下文取语言标识，注入到 HTML 模板的
<html lang="{{lang}}"> - PHP 模板：用
<html lang="= htmlspecialchars($lang, ENT_QUOTES) ?>">，防 XSS - 纯前端切换：不能只改
document.body.lang，必须改document.documentElement.lang；但注意——已激活的屏幕阅读器不会响应此变更 - 最保险的做法：语言切换走整页刷新，或至少触发 ARIA-live 区域重载关键文案
最容易被忽略的一点：HTML 解析完成后，再通过 JS 修改 lang，对已挂载的辅助技术状态基本无效。真正起作用的，永远是初始 HTML 中那个 <html lang="xxx">。
