HTML lang语言属性设置方法详解

先列出几个关键结论：lang 属性看似简单，实际容易出错。许多开发者以为在任意元素上写 lang="zh-CN" 就足够，但浏览器和读屏软件并不识别。下面逐一说明核心要点。

lang 属性必须写在 html 标签上，其他位置基本无效

浏览器、屏幕阅读器、搜索引擎只认根元素上的 lang 声明。写在 body、div 或任何子元素上，主体语言等同于未声明。

以下典型错误比较常见：

• → 读屏软件仍按系统默认语言朗读
• → 浏览器忽略，HTML5 已明确弃用
• 或 （非法值）→ 被视为“未知语言”，比不写更差

正确做法：服务端根据用户请求头 Accept-Language 或路由路径（如 /en/about）直接输出带对应 lang 的 HTML。硬编码最可靠，例如：。

选哪个语言代码：优先用 zh-CN，别用 zh 或 zh-Hans

zh-CN 是事实标准，兼容性最佳。zh 过于宽泛，未指明简繁体和地域，部分辅助技术可能降级处理。zh-Hans 虽强调简体字但未绑定地域，某些旧版读屏或 SEO 工具识别不稳定。

所有值须符合 BCP 47 规范，大小写不敏感但惯例小写。切勿拼错，例如 zh-china、zh_CN、ZH-CN 均为无效值。

多语言页面中，局部切换可用子元素 lang。示例：

这句中文and this is English

—— 这样 :lang(en) CSS 才能精准命中。

JS 动态改 document.documentElement.lang 几乎无用

页面加载完成后用 JS 修改 lang，对已激活的屏幕阅读器、已索引的搜索引擎、已解析的 CSS :lang() 规则均无实际影响。

若真需要运行时语言切换（如 demo 页面），至少需做到以下几步：

• 同步更新 document.documentElement.lang
• 遍历并重设所有已渲染元素的 lang 属性（尤其是 body 下带 lang 的容器）
• 手动触发 aria-live 提示，告知读屏用户语言已变

但需注意：组件内部逻辑（如日期格式、翻译弹窗）不会因 lang 变化而自动响应——lang 只管语义和可访问性，不管业务逻辑。

:lang() CSS 选择器如何正确生效

:lang(zh) 只匹配 lang="zh" 的元素，不匹配 lang="zh-CN"。要覆盖更广范围，要么用 :lang(zh-CN), :lang(zh-Hans), :lang(zh-Hant) 显式列举，要么退而用属性选择器 [lang^="zh"]。不过需注意，后者可能误伤 lang="zh-XX-YY" 这类非常规值。

实用技巧：q:lang(ja) { quotes: "「" "」" "『" "』"; } 可让日文引用自动套用日式引号，前提是 HTML 中对应 元素确实有 lang="ja"。

牢记：:lang() 匹配的是元素自身或其祖先的 lang 值，而非内容检测结果。即便将整段英文塞入

，它也不会被 :lang(en) 选中——这才是关键。