HTML lang 属性：语言代码及其作用

设置页面语言

在 <html> 元素上加上 lang 属性，值为页面所用语言的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

这个属性对这段文字没有可见的影响，但它会改变页面的处理方式：屏幕阅读器会用英语语音朗读它，浏览器在决定是否提供翻译时会参考它，拼写检查工具也可以据此选择英语词典。没有它，各种工具只能靠猜，设置为其他语言的屏幕阅读器可能会用错误的发音朗读英文文本。

语言代码

属性值是 BCP 47 标准中的语言标签。大多数是两个字母的语言代码，后面可以跟一个地区或文字代码：

代码不区分大小写，但惯例是语言小写、地区大写。只有在地区变体重要时才加上地区；en 本身就是完整且正确的值。

lang 带来的可见变化

lang 的大多数作用是给软件看的，但也有几处会在屏幕上体现出来。<q> 元素生成的引号会跟随语言变化，大小写规则也一样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

每一行都有自己风格的引号。最后一列中，同样的 text-transform: uppercase 在英语中得到“ISTANBUL”，在土耳其语中得到“İSTANBUL”，因为土耳其语的大写 i 保留上面的点。把土耳其语那一行的 lang 改成 en，那个点就消失了。自动断字（CSS 中的 hyphens: auto）也取决于 lang：浏览器需要知道语言，才能知道单词可以在哪里断开。

标记另一种语言的短语

lang 可以用在任何元素上，而不只是 <html>。当一种语言的页面引用了另一种语言的短语时，把这个短语包裹起来，并给它单独的代码。CSS 可以用 :lang() 选择器按语言选择元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

屏幕阅读器读到“bon appétit”时会切换为法语发音，之后再切回英语。:lang(fr) 也能匹配 fr-CA 和其他任何法语变体，还能匹配从祖先元素继承语言的元素，而 [lang="fr"] 这样的属性选择器会漏掉它们。

从右到左的语言：dir

阿拉伯语、希伯来语、波斯语和乌尔都语都是从右到左书写的。lang 指明语言；dir 属性设置方向。整页阿拉伯语的页面会在 <html> 上同时使用两者：

<html lang="ar" dir="rtl">

对于从左到右页面中的一小段从右到左的短语，把两者都加在包裹它的元素上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

这段 blockquote 靠右对齐，它的绿色竖条也移到了右侧，因为 border-inline-start 会跟随方向。用 margin-inline-start 这样的逻辑属性代替 margin-left，布局在两个方向上都能保持正确。

lang 与 hreflang

lang 描述元素的内容。hreflang 写在链接上，描述它指向的页面。有翻译版本的网站会在 <head> 中列出每个版本，这样搜索引擎就能把每位读者引导到合适的版本：

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

每个翻译页面仍然要在 <html> 上设置自己的 lang：德语页面用 lang="de"。

常见错误

• 漏写 lang。 很多模板都忘了它；在每个页面上，把它和 doctype 一起设置好。
• 把 lang="en" 复制到翻译页面中。 标记为英语的德语页面会被用英语发音朗读。要与内容保持一致。
• 把国家代码当作语言代码。 lang="jp" 和 lang="gr" 并不表示日语和希腊语；正确的代码是 ja 和 el。
• 用 lang 设置方向。 只写 lang="ar" 并不会让文字从右到左排列。要加上 dir="rtl"。
• 写成 lang="en_US"。 分隔符是连字符：en-US。