html 页面语言必须用 声明,写在根元素上; 或 http 头无效,子元素 lang 仅用于局部覆盖,空值更糟,服务端动态输出最可靠。

HTML 页面语言必须用 lang 属性声明,不是靠 meta 标签或 HTTP 头“代替”——浏览器、屏幕阅读器和搜索引擎都只认这个属性。
lang 属性该写在哪个标签上
必须写在 html 根元素上,比如 。写在 body 或其他子元素上无效(部分辅助技术可能忽略,SEO 基本不识别)。
常见错误现象:
– 页面用了 <meta http-equiv="Content-Language" content="zh-CN">,但 lang 缺失 → 屏幕阅读器仍按系统默认语言朗读
– lang 写在 <div lang="en"> 里想局部切换 → 有效,但主体语言仍需在 <code>html 上声明
- 多语言站点:主语言设在
html,局部内容用子元素的lang覆盖,例如<p>这句是中文<span lang="en">but this is English</span></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p> - 不要写
或留空,空值会被视为“未知语言”,比不写还糟 - 服务端渲染时注意动态插入的
html标签是否带对了lang,模板里硬编码最稳
zh-CN、zh-Hans、zh 有什么区别
三者语义不同,影响字体渲染、断行规则和辅助技术行为:
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS,遵循SEO标准。 1.支持中文、英文两种版本,后台可以在不同的环境下编辑中英文。 3.程序和界面分离,提供通用的PHP标准语法字段供前台调用,可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
-
zh-CN:简体中文 + 中国大陆规范(推荐大多数国内网站使用) -
zh-Hans:仅表示“简体字”,不指定地区(适合面向全球华人的简体内容,如开源文档) -
zh:过于宽泛,无法区分简繁,iOS Safari 会降级为英文语音引擎处理
性能 / 兼容性影响:
– Chrome 和 Firefox 对 zh-Hans 支持良好,但旧版 Edge(EdgeHTML)曾忽略它
– 某些中文字体 CSS font-language-override 依赖 lang 值精准匹配才能触发正确字形
国际化项目里 lang 怎么动态设置
不能只靠 JS 修改 document.documentElement.lang —— 页面已加载后改,屏幕阅读器大概率不会重读,搜索引擎也不会重新索引。
正确做法是服务端根据用户请求头 Accept-Language 或路由(如 /en/about)直接输出对应 lang 值的 HTML。
- Next.js / Nuxt 等框架:在 HTML 模板或
_document.tsx中注入lang,别等客户端 hydrate - 纯静态站:生成多套 HTML(
index-zh.html、index-en.html),每份都带自己的lang - 如果真要 JS 控制(如 demo 页手动切换),至少同步改
和所有已渲染的lang子元素,并触发aria-live提示
最容易被忽略的一点:第三方组件库(比如 Ant Design、Element Plus)内部的提示文案、日期格式化,往往不读取页面 lang,而是依赖自己配置的 locale。光设 不会让组件弹出日文提示框——lang 管的是语义和可访问性,不是组件逻辑。










