lang属性必须写在标签上,其他位置无效;中文推荐用zh-cn,多语言混排需显式标注子元素lang,js动态修改无效。

lang 属性必须写在 标签上,其他位置无效——这是所有问题的起点。写错位置、写错值、写完再用 JS 改,都会让屏幕阅读器“听不懂”,翻译按钮“不出来”,搜索引擎“认不出”。
lang 属性只能写在 标签上
浏览器和读屏软件(NVDA、VoiceOver)只在解析 HTML 初始结构时读取 ,之后任何修改都晚了。
-
→ 不被识别为文档语言,仅影响该内部子元素的局部行为(极弱) <div lang="en"> → 可用于局部英文段落,但不能替代主语言声明<li> <code><meta http-equiv="Content-Language" content="zh-CN">→ HTML5 已弃用,Chrome/Firefox/Safari 全部忽略-
或→ 空值视为“未知语言”,zh过于宽泛,部分旧版 VoiceOver 会直接 fallback 到英文 TTS -
zh-CN:事实标准,明确“简体中文 + 中国大陆规范”,NVDA/JAWS/VoiceOver/Chrome 全部稳定支持,CMS 和翻译插件默认认它 -
zh-Hans:强调“简体字”,不绑定地域,适合港澳台用户也用简体的场景;但旧版 Safari 的:lang(zh)可能匹配不准 -
zh:不区分简繁、不指明区域,Google Search Console 可能报“未指定语言”,iOS VoiceOver 可能跳过中文引擎硬读多音字 - 别写
zh_china、zh_CN、Chinese—— 全部非法,会被静默忽略 - 单个外文词:
<span lang="en">API</span>→ 读作 /ˈeɪ.piː.ˈaɪ/,不是“阿皮” - 整段英文:
<p lang="en">This is a code example.</p> - 代码块注释:
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>(注意不是lang="bash") - 避免滥用:
<div lang="en"> 包裹多个段落 —— 语义不清,且可能干扰父级 <code>:lang(zh)CSS 匹配 -
<title></title>和alt属性无法嵌套标签,目前无标准解法;含多语言标题时,优先保证主体内容语言准确 - Next.js/Nuxt:必须在
app/layout.tsx或_document.tsx中注入lang,确保首屏 HTML 响应中就存在 - PHP 模板:
,防 XSS - 纯前端 SPA:若支持多语言,必须用 SSR 或 SSG 产出不同
lang的 HTML 入口文件,不能靠 JS patch - 第三方组件库(如 Ant Design)内部文案、日期格式化不读取
,而是依赖自己配置的locale—— 光设lang不会让弹窗变日文
中文该用 zh-CN 还是 zh-Hans 或 zh
三者语义不同,兼容性差异明显,选错会影响断词、字体回退、CSS 匹配甚至 SEO。
多语言混排时怎么让 lang 真正起作用
主语言靠 确立,但嵌入的英文术语、日文引用、代码注释等,必须显式标注子元素的 lang,否则读屏仍用中文规则硬读。
动态页面中设置 lang 容易踩的坑
JS 动态改 document.documentElement.lang 对已加载页面基本无效——读屏不会重载语音引擎,搜索引擎不会重新索引,CSS :lang() 规则也不会重新计算。
最常被忽略的一点:即使 写对了,如果页面里大量英文术语、代码块、SVG 文本没加 lang 标注,辅助技术仍可能误判语种。真正有效的语言声明,得配合语义化标记一起用。











