lang属性必须写在标签上，如，写在其他标签无效；多语言内容需用lang单独标注子元素；动态页面须在ssr或html源头设置，不可js后期修改。

页面的 lang 属性必须显式声明，且值要精确匹配内容语言（含区域变体），否则屏幕阅读器、搜索引擎和浏览器功能（如翻译）可能误判或降级处理。

lang 属性该写在哪个标签上？

只写在 标签上即可，这是唯一有效位置。写在 、<div> 或其他元素上对整体页面语言无意义（仅影响该元素及其子元素的局部语言，不解决核心问题）。 <ul> <li>正确：<code>

错误：（无效）、（粒度太粗）

若页面含多语言混合段落（如英文引文），再用 lang 单独标注对应 <p></p> 或 <blockquote></blockquote>

zh-CN、zh-Hans、zh-Hans-CN 有什么区别？

优先选 zh-CN —— 它明确表示“简体中文 + 中国大陆规范”，被所有主流辅助技术和 SEO 系统广泛识别。不要用模糊值，比如：

• zh：未指定书写形式和地域，屏幕阅读器可能读错拼音或用错语音库
• zh-Hans：指定了简体字，但没说明地域，某些翻译工具会默认 fallback 到 zh-CN，但不可靠
• zh-Hans-CN：合法但冗余，IANA 语言子标签推荐使用最短有效形式，zh-CN 已隐含简体（因中国大陆官方用简体）

动态渲染页面（React/Vue/SSR）怎么设 lang？

服务端渲染（SSR）时必须由后端注入真实语言值；客户端渲染（CSR）不能依赖 JS 动态改 ，因为辅助技术在 DOM 解析初期就读取该属性，JS 执行已滞后。

• Next.js：在 app/layout.tsx 中用 ，locale 来自路由或配置
• Nuxt：通过 useLocaleHead() 设置，确保在首屏 HTML 中输出
• 纯前端 SPA：若支持多语言，必须用 SSR 或静态生成（SSG）产出不同 lang 的 HTML 入口文件，不能靠 JS patch

容易被忽略的细节

语言变更时，lang 必须同步更新——比如用户切换语言后，仅改文案不改 ，会导致语音朗读仍用旧语言引擎，甚至触发浏览器错误翻译（如把中文页强行译成英文）；另外，hreflang 标签和 lang 属性没有自动关联，两者需独立、一致地维护。