HTML5 的 lang 属性是影响可访问性、SEO、字体渲染和浏览器行为的核心语义标记，必须设在 根标签上且值合法（如 zh-CN），局部多语言需显式标注，并配合 :lang() 伪类实现字体与排版控制。

HTML5 中 lang 属性不是可有可无的装饰，而是影响可访问性、SEO、字体渲染和浏览器行为的核心语义标记。规范使用的关键，在于位置准确、值合法、层级合理、配合得当。

根标签必须设且只能设在 html> 上

浏览器、屏幕阅读器（如 VoiceOver、NVDA）、搜索引擎只读取 这一处的值作为整页语言依据。其他位置全无效：

• —— 和 不继承，语义断裂
• —— HTML5 已弃用，现代浏览器忽略
• 或 —— 空值或非法值，被当作未知语言处理

语言值必须符合 BCP 47 规范

中文推荐统一使用 zh-CN，它是事实标准，兼容性最稳、拼音支持最全、辅助技术识别率最高：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• ✅ 正确：zh-CN、en-US、ja-JP（小写语言码 + 大写地区码 + ASCII 短横线）
• ❌ 错误：zh_CN（下划线）、zh-cn（地区码应大写）、zh-china（非 IANA 注册值）
• 慎用：zh（太宽泛，iOS VoiceOver 可能 fallback 到英文 TTS）；zh-Hans（仅表简体，不绑定地域，部分旧引擎语音库缺失）

局部多语言内容要显式标注

根语言不能替代局部语言声明。混合内容不加 lang，会导致屏幕阅读器硬读、字体错乱、拼写检查失效：

• 单个术语：useState
• 整段外文：

  C’est une citation.

• 代码注释：

  # Initialize counter

• 避免无语义包裹：
  ...
  破坏语义层级，也干扰 :lang(zh) CSS 匹配

配合 :lang() 伪类与字体链真正落地效果

只设 lang 不写 CSS，等于没完成闭环。关键样式需靠 :lang() 触发：

• :lang(zh) { font-family: "PingFang SC", "Noto Sans SC", sans-serif; }
• :lang(ja) { font-family: "Hiragino Kaku Gothic Pro", sans-serif; }
• :lang(ar) { direction: rtl; text-align: right; }
• 注意：字体名含空格必须加双引号；末尾必须保留 sans-serif 或 serif 作为兜底

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！