HTML lang 全局属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

lang 全局属性有助于定义元素的语言：非可编辑元素所使用的语言，或用户应填写的可编辑元素应使用的语言。该属性包含一个单独的 BCP 47 语言标签。

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

试一试

<p>This paragraph is English, but the language is not specifically defined.</p>

<p lang="en-GB">This paragraph is defined as British English.</p>

<p lang="fr">Ce paragraphe est défini en français.</p>

p::before {
  padding-right: 5px;
}

[lang="en-GB"]::before {
  content: "(In British English) ";
}

[lang="fr"]::before {
  content: "(In French) ";
}

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

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

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

可访问性考虑

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 role="menuitem">
      <a
        href="/ca/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Catalan">
        <bdi lang="ca">Català</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="German">
        <bdi lang="de">Deutsch</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Spanish">
        <bdi lang="es">Español</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="French">
        <bdi lang="fr">Français</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Japanese">
        <bdi lang="ja">日本語</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Korean">
        <bdi lang="ko">한국어</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Portuguese (Brazilian)">
        <bdi lang="pt-BR">Português (do&nbsp;Brasil)</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Russian">
        <bdi lang="ru">Русский</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/uk/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Ukrainian">
        <bdi lang="uk">Українська</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Chinese (Simplified)">
        <bdi lang="zh-Hans">中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        rel="nofollow"
        id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>

继承

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

规范

规范
HTML # attr-lang

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年7月9日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误