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 上檢視此頁面 • 報告此內容的錯誤