PHP小码农

Appearance

lang 语言 ​

lang 全局属性指定元素内容的自然语言，使用 BCP 47 标签格式。它影响 SEO、屏幕阅读器发音、拼写检查和翻译工具的行为。

前置知识

阅读本节前，建议先了解：title 提示文本

基础概念 ​

什么是 lang 属性 ​

lang 属性告诉浏览器和辅助技术元素内容使用的自然语言。它使用 BCP 47 语言标签格式。

html
<html lang="zh-CN">
  <body>
    <h1>中文页面标题</h1>
    <p>这是中文内容。</p>
    <p lang="en">This is English content.</p>
    <p lang="ja">こんにちは世界</p>
  </body>
</html>

BCP 47 语言标签格式 ​

格式说明示例
语言代码ISO 639-1 两字母代码zh, en, ja
语言-国家语言+国家/地区代码zh-CN, en-US, en-GB
语言-文字语言+文字脚本代码zh-Hans, zh-Hant

lang 的用途 ​

用途说明
SEO帮助搜索引擎识别页面语言
TTS屏幕阅读器选择正确的发音引擎
拼写检查浏览器使用正确的拼写检查规则
翻译Google Translate 等工具正确处理

语法与使用 ​

基本语法 ​

html
<html lang="zh-CN">
  <body>
    <!-- 继承 zh-CN -->
    <h1>中文页面</h1>
    
    <!-- 覆盖为 en -->
    <blockquote lang="en">The only way to do great work is to love what you do.</blockquote>
    
    <!-- 回到 zh-CN -->
    <p>又回到中文。</p>
  </body>
</html>

常见语言标签 ​

语言标签说明
简体中文zh-CN中国大陆
繁体中文zh-TW台湾地区
英文（美国）en-US美国英语
英文（英国）en-GB英国英语
日语ja日本语
韩语ko韩国语
法语fr法语
阿拉伯语ar阿拉伯语（RTL）

详细说明 ​

lang 对屏幕阅读器的影响 ​

屏幕阅读器遇到 lang 变化时会自动切换语音引擎。这对于多语言页面非常重要。

html
<html lang="zh-CN">
  <h1>标题</h1>          <!-- 中文语音 -->
  <p lang="en">Hello</p> <!-- 切换到英文语音 -->
  <p>中文内容</p>        <!-- 回到中文语音 -->
</html>

lang 对 SEO 的影响 ​

搜索引擎使用 lang 属性来判断页面的目标语言，帮助将页面分到正确的语言索引。

html
<!-- 推荐：明确指定语言 -->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>中文页面</title>
  </head>
</html>

<!-- 不推荐：缺少 lang -->
<html>
  <head>
    <title>未知语言</title>
  </head>
</html>

lang 对拼写检查的影响 ​

html
<!-- 中文：不检查拼写 -->
<input type="text" lang="zh-CN" placeholder="输入中文">

<!-- 英文：启用拼写检查 -->
<input type="text" lang="en" placeholder="Type English">

<!-- 混合语言的 contenteditable -->
<div contenteditable="true" lang="zh-CN">
  中文内容 <span lang="en">English text</span> 中文内容
</div>

实战示例 ​

多语言页面 ​

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>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; padding: 2rem; line-height: 1.7; }
    .lang-section {
      margin: 2rem 0; padding: 1.5rem;
      border: 1px solid #e2e8f0; border-radius: 8px;
    }
    .lang-section h3 {
      padding-bottom: 0.5rem; border-bottom: 2px solid #3b82f6;
      margin-bottom: 1rem; color: #1e293b;
    }
    .lang-label {
      display: inline-block; padding: 0.15rem 0.5rem;
      background: #dbeafe; color: #1e40af;
      border-radius: 3px; font-size: 0.75rem; margin-right: 0.5rem;
    }
    code { background: #f1f5f9; padding: 0.15rem 0.4rem; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>多语言页面示例</h1>
  <p>本示例展示 <code>lang</code> 属性在多语言页面中的使用。</p>

  <div class="lang-section">
    <h3><span class="lang-label">zh-CN</span>简体中文</h3>
    <p>CSS 的中文名称是"层叠样式表"（<span lang="en">Cascading Style Sheets</span>）。</p>
    <p>JavaScript 最初由 <span lang="en">Brendan Eich</span> 在 1995 年创造。</p>
  </div>

  <div class="lang-section" lang="en">
    <h3><span class="lang-label">en-US</span>English</h3>
    <p>The full name of CSS is "Cascading Style Sheets".</p>
    <p>JavaScript was created by <strong>Brendan Eich</strong> in 1995.</p>
  </div>

  <div class="lang-section" lang="ja">
    <h3><span class="lang-label">ja</span>日本語</h3>
    <p>CSS の正式名称は「Cascading Style Sheets」です。</p>
  </div>

  <div class="lang-section">
    <h3>混合语言引用</h3>
    <blockquote style="margin:1rem 0;padding:1rem;background:#f8fafc;border-left:3px solid #3b82f6;border-radius:0 4px 4px 0;font-style:italic;">
      <p lang="en">"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."</p>
      <footer>— <span lang="en">Martin Fowler</span></footer>
    </blockquote>
    <p>任何傻瓜都能写出计算机能理解的代码。优秀的程序员能写出人类能理解的代码。</p>
  </div>
</body>
</html>

注意事项 ​

常见错误 ​

  1. 缺少 lang 属性：<html> 标签上没有指定语言
  2. 使用错误的语言代码：cn 不是有效代码，应为 zh-CN
  3. 过度细分：通常 zh-CN 就够了
  4. 品牌名标记错误：外文品牌名应标记原始语言
html
<!-- 错误 -->
<html lang="cn">
<span lang="cn">Google</span>

<!-- 正确 -->
<html lang="zh-CN">
<span lang="en" translate="no">Google</span>

最佳实践 ​

  1. 始终在 html 元素上设置 lang：这是最重要的语言声明
  2. 使用精确的语言标签：zh-CN 优于 zh
  3. 多语言引用标注原始语言：引用外文时标记 lang
  4. 配合 translate="no" 使用：品牌名不应被翻译
  5. 保持一致性：整个网站使用统一的标签策略

下一节

继续学习：dir 文本方向

参考链接 ​