lang 属性与语言声明

lang 属性用于声明 HTML 文档或元素的语言，它直接影响屏幕阅读器的语音选择、搜索引擎的语言判断以及浏览器的翻译功能。正确使用 lang 属性是国际化和无障碍的基础。本节将详细介绍 BCP 47 语言标签规范、常见语言标签用法，以及 lang 属性对 SEO 和 TTS（文本转语音）的影响。

前置知识

阅读本节前，建议先了解：文字缩放与适配

为什么需要 lang 属性

屏幕阅读器：根据 lang 属性选择正确的发音引擎（如中文、英文、日文）
搜索引擎：帮助搜索引擎识别页面语言，提高多语言搜索结果准确度
浏览器翻译：基于 lang 属性判断是否需要提供翻译提示
拼写检查：根据语言选择正确的拼写检查规则
CSS 选择器：可以使用 :lang() 伪类选择器针对不同语言设置样式

BCP 47 语言标签

BCP 47（Best Current Practice 47）是 IETF 制定的语言标签标准，格式为：

language-tag = language
             ["-" script]
             ["-" region]
             ["-" variant]
             ...

部分	说明	示例
`language`	ISO 639-1（两字母）或 ISO 639-2/3（三字母）	`zh`、`en`、`ja`、`ko`
`script`	ISO 15924 书写文字（四字母）	`Hans`（简体）、`Hant`（繁体）、`Latn`（拉丁）
`region`	ISO 3166-1 国家/地区（两字母）	`CN`、`TW`、`US`、`GB`
`variant`	变体标识	`pinyin`（拼音）

常见语言标签

标签	语言	说明
`zh-CN`	中文（简体，中国大陆）	最常用
`zh-TW`	中文（繁体，台湾）	台湾地区
`zh-HK`	中文（繁体，香港）	香港地区
`zh-Hans`	中文（简体）	不限定地区
`zh-Hant`	中文（繁体）	不限定地区
`en-US`	英语（美国）	美式英语
`en-GB`	英语（英国）	英式英语
`ja-JP`	日语	日本
`ko-KR`	韩语	韩国
`fr-FR`	法语（法国）	法式法语
`de-DE`	德语（德国）	标准德语
`es-ES`	西班牙语（西班牙）	欧洲西班牙语
`pt-BR`	葡萄牙语（巴西）	巴西葡萄牙语
`ru-RU`	俄语	俄罗斯

lang 属性的使用

文档级别

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>中文网站</title>
</head>
<body>
  <p>这是一个中文网站。</p>
</body>
</html>

元素级别

当页面中包含不同语言的内容时，可以在元素上声明语言：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多语言内容页面</title>
</head>
<body>
  <h1>技术术语解释</h1>

  <p>HTML 代表 <span lang="en">HyperText Markup Language</span>，即超文本标记语言。</p>

  <p>CSS 是 <span lang="en">Cascading Style Sheets</span> 的缩写。</p>

  <blockquote lang="en">
    <p>The best way to predict the future is to invent it.</p>
    <footer>— Alan Kay</footer>
  </blockquote>

  <!-- 法语引用 -->
  <blockquote lang="fr">
    <p>Tout pour le peuple, rien par le peuple.</p>
    <footer>— Napoléon Bonaparte</footer>
  </blockquote>
</body>
</html>

lang vs xml:lang

html

<!-- HTML 文档中使用 lang -->
<html lang="zh-CN">

<!-- XHTML 文档中两者都使用 -->
<html lang="zh-CN" xml:lang="zh-CN">

<!-- 建议同时使用两者以兼容 XHTML -->
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

对 SEO 的影响

搜索引擎语言识别

Google 使用 lang 属性来判断页面语言，影响搜索结果的展示：

场景	说明
正确声明语言	搜索引擎能正确索引和展示
未声明语言	搜索引擎需要猜测语言，可能不准确
语言冲突	页面内容和 `lang` 声明不一致可能影响排名

hreflang 属性

对于多语言网站，使用 hreflang 属性告诉搜索引擎不同语言版本的关系：

html

<!-- 页面 head 中声明 -->
<head>
  <title>产品详情</title>

  <!-- 当前页面为中文简体 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/product" />
  <link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-TW/product" />
  <link rel="alternate" hreflang="en-US" href="https://example.com/en-US/product" />
  <link rel="alternate" hreflang="ja-JP" href="https://example.com/ja-JP/product" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/product" />
</head>

对 TTS（文本转语音）的影响

lang 属性直接影响屏幕阅读器的发音方式：

html

<!-- 错误：没有声明语言，屏幕阅读器可能用错误的语言发音 -->
<html>
  <p>Hello World</p>
  <p>你好世界</p>
</html>

<!-- 正确：声明语言后，屏幕阅读器会用正确的语言引擎发音 -->
<html lang="zh-CN">
  <p>Hello World</p>  <!-- 可能用中文发音引擎读英文 -->
  <p>你好世界</p>     <!-- 正确使用中文发音 -->
</html>

<!-- 更好：为英文内容单独声明语言 -->
<html lang="zh-CN">
  <p><span lang="en">Hello World</span></p>  <!-- 使用英文发音 -->
  <p>你好世界</p>
</html>

:lang() CSS 伪类

可以使用 :lang() 伪类针对不同语言设置样式：

css

/* 中文使用宋体/黑体 */
:lang(zh) {
  font-family: "PingFang SC", "Microsoft YaHei", "SimHei", sans-serif;
}

/* 日语使用专门字体 */
:lang(ja) {
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}

/* 韩语使用专门字体 */
:lang(ko) {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* 不同语言的引号样式 */
:lang(zh) q::before { content: "\201C"; }
:lang(zh) q::after  { content: "\201D"; }
:lang(en) q::before { content: "\201C"; }
:lang(en) q::after  { content: "\201D"; }
:lang(ja) q::before { content: "\300C"; }
:lang(ja) q::after  { content: "\300D"; }

实战示例：多语言混合页面

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端开发术语对照表</title>
  <style>
    :lang(zh) { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
    :lang(en) q { font-style: italic; }

    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>前端开发术语对照表</h1>

  <table>
    <thead>
      <tr>
        <th>中文术语</th>
        <th>英文术语</th>
        <th>说明</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>语义化标签</td>
        <td lang="en">Semantic HTML</td>
        <td>使用具有明确含义的 HTML 元素</td>
      </tr>
      <tr>
        <td>无障碍</td>
        <td lang="en">Accessibility (a11y)</td>
        <td>使网站对所有用户可用</td>
      </tr>
      <tr>
        <td>响应式设计</td>
        <td lang="en">Responsive Design</td>
        <td>页面自适应不同屏幕尺寸</td>
      </tr>
    </tbody>
  </table>

  <blockquote lang="en" cite="https://www.w3.org/">
    <p>The power of the Web is in its universality.</p>
    <footer>— Tim Berners-Lee</footer>
  </blockquote>
</body>
</html>

注意事项

lang 属性必须出现在 <html> 标签上：每个 HTML 页面都应声明文档语言
语言标签大小写不敏感：zh-CN 和 zh-cn 等效
子元素可以覆盖父元素的语言：使用元素级 lang 声明不同语言的内容
不要对代码片段使用 lang：<code> 中的代码不应设置 lang
确保标签与实际内容一致：错误的 lang 声明比没有声明更糟糕

最佳实践

始终在 <html> 标签上声明文档语言
页面中不同语言的内容使用元素级 lang 声明
使用 BCP 47 标准格式编写语言标签
多语言网站使用 hreflang 属性关联不同语言版本
使用 :lang() CSS 伪类为不同语言设置字体和排版样式
在翻译内容时同时更新 lang 属性

继续学习：字符编码（UTF-8）

lang 属性与语言声明 ​

为什么需要 lang 属性 ​

BCP 47 语言标签 ​

常见语言标签 ​

lang 属性的使用 ​

文档级别 ​

元素级别 ​

lang vs xml:lang ​

对 SEO 的影响 ​

搜索引擎语言识别 ​

hreflang 属性 ​

对 TTS（文本转语音）的影响 ​

:lang() CSS 伪类 ​

实战示例：多语言混合页面 ​

注意事项 ​

最佳实践 ​

参考链接 ​

lang 属性与语言声明

为什么需要 lang 属性

BCP 47 语言标签

常见语言标签

lang 属性的使用

文档级别

元素级别

lang vs xml:lang

对 SEO 的影响

搜索引擎语言识别

hreflang 属性

对 TTS（文本转语音）的影响

:lang() CSS 伪类

实战示例：多语言混合页面

注意事项

最佳实践

参考链接