lang

**lang** 全局属性 用于定义元素的语言：非可编辑元素的书写语言，或用户应使用该语言书写可编辑元素的语言。该属性包含一个在 RFC 5646：语言标识标签（也称为 BCP 47） 中定义的格式中的单个“语言标签”。

注意：lang 的默认值为空字符串，这意味着语言未知。因此，建议始终为该属性指定适当的值。

试一试

如果属性值为空字符串（lang=""），则语言设置为未知；如果语言标签不符合 BCP47，则设置为无效。

即使设置了**lang** 属性，它也可能不会被考虑在内，因为 xml:lang 属性具有优先级。

对于 CSS 伪类 :lang，两个无效的语言名称如果名称不同，则不同。因此，虽然 :lang(es) 匹配 lang="es-ES" 和 lang="es-419"，但 :lang(xyzzy) 不会匹配 lang="xyzzy-Zorp!"。

语言标签语法

完整的 BCP47 语法非常详细，足以标记极其具体的语言方言，但大多数使用情况要简单得多。

语言标签由用连字符分隔的语言子标签组成，其中每个子标签表示语言的特定属性。3 个最常见的子标签是

语言子标签

必需。一个 2 或 3 个字符的代码，用于定义基本语言，通常用小写字母编写。例如，英语的语言代码是 en，Badeshi 的代码是 bdz。

脚本子标签

可选。此子标签定义用于该语言的书写系统，始终为 4 个字符长，第一个字母大写。例如，法语盲文是 fr-Brai，而 ja-Kana 是用片假名字母表书写的日语。如果语言以非常典型的方式书写，例如英语用拉丁字母表，则无需使用此子标签。

区域子标签

可选。此子标签定义来自特定位置的基本语言的方言，可以是匹配国家代码的 2 个大写字母，也可以是匹配非国家地区的 3 个数字。例如，es-ES 指的是西班牙语（西班牙语），es-013 指的是西班牙语（中美洲）。“国际西班牙语”只是 es。

如果同时存在脚本子标签和区域子标签，则脚本子标签在区域子标签之前 - ru-Cyrl-BY 指的是俄语，用西里尔字母书写，在白俄罗斯使用。

要查找语言的正确子标签代码，请尝试 语言子标签查找。

无障碍问题

WCAG 成功准则 3.1.1 要求页面语言以可“以编程方式确定”的方式指定（即通过lang 属性）。

WCAG 成功准则 3.1.2 要求具有部分不同语言的页面也指定这些部分的语言。同样，lang 属性是此操作的正确机制。

这些要求的主要目的是允许屏幕阅读器等辅助技术调用正确的发音。

例如，本网站 (MDN) 上的语言菜单为每个条目包含一个lang 属性

html
<div class="dropdown-container language-menu">
  <button
    id="header-language-menu"
    type="button"
    class="dropdown-menu-label"
    aria-haspopup="true"
    aria-owns="language-menu"
    aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
    id="language-menu"
    class="dropdown-menu-items right show"
    aria-expanded="true"
    role="menu">
    <li lang="ca" role="menuitem">
      <a href="/ca/docs/Web/HTML/Global_attributes/lang" title="Catalan">
        <bdi>Català</bdi>
      </a>
    </li>
    <li lang="de" role="menuitem">
      <a href="/de/docs/Web/HTML/Globale_Attribute/lang" title="German">
        <bdi>Deutsch</bdi>
      </a>
    </li>
    <li lang="es" role="menuitem">
      <a href="/es/docs/Web/HTML/Atributos_Globales/lang" title="Spanish">
        <bdi>Español</bdi>
      </a>
    </li>
    <li lang="fr" role="menuitem">
      <a href="/fr/docs/Web/HTML/Attributs_universels/lang" title="French">
        <bdi>Français</bdi>
      </a>
    </li>
    <li lang="ja" role="menuitem">
      <a href="/ja/docs/Web/HTML/Global_attributes/lang" title="Japanese">
        <bdi>日本語</bdi>
      </a>
    </li>
    <li lang="ko" role="menuitem">
      <a href="/ko/docs/Web/HTML/Global_attributes/lang" title="Korean">
        <bdi>한국어</bdi>
      </a>
    </li>
    <li lang="pt-BR" role="menuitem">
      <a
        href="/pt-BR/docs/Web/HTML/Global_attributes/lang"
        title="Portuguese (Brazilian)">
        <bdi>Português (do&nbsp;Brasil)</bdi>
      </a>
    </li>
    <li lang="ru" role="menuitem">
      <a href="/ru/docs/Web/HTML/Global_attributes/lang" title="Russian">
        <bdi>Русский</bdi>
      </a>
    </li>
    <li lang="uk" role="menuitem">
      <a
        href="/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang"
        title="Ukrainian">
        <bdi>Українська</bdi>
      </a>
    </li>
    <li lang="zh-Hans" role="menuitem">
      <a
        href="/zh-CN/docs/Web/HTML/Global_attributes/lang"
        title="Chinese (Simplified)">
        <bdi>中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
        href="/en-US/docs/Web/HTML/Global_attributes/lang$locales"
        rel="nofollow"
        id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>

继承

如果元素没有 lang 属性，它将继承其父节点上设置的 lang 值，该值又可能从其父节点继承，依此类推。

规范

规范
HTML 标准
# attr-lang

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅