HTML Living Standard/lang属性

lang属性

lang属性は、要素内で使用される言語を指定するためのグローバル属性です。この属性は、スクリーンリーダーや翻訳ツール、検索エンジンに対して、指定された言語に基づく適切な処理を促します。

基本構文

<element lang="言語コード"></element>

言語コードは、BCP 47の仕様に基づく形式で指定します（IETF Best Current Practice。現在は RFC 5646 と RFC 4647）。例として、以下のコードが一般的に使用されます。

en: 英語
ja: 日本語
fr: フランス語
zh-CN: 中国語（簡体字）
es-MX: スペイン語（メキシコ）

効果

アクセシビリティ: スクリーンリーダーが指定された言語に基づいて正確な発音を行います。
検索エンジン最適化 (SEO): 検索エンジンが言語を正しく理解することで、適切な検索結果を表示します。
翻訳ツール: 自動翻訳ツールが指定された言語に基づいて動作します。

使用例

以下は、lang属性を使用して要素の言語を指定する例です。

<p lang="en">This paragraph is in English.</p>
<p lang="ja">この段落は日本語で書かれています。</p>
<p lang="fr">Ce paragraphe est en français.</p>

この例では、それぞれの段落が異なる言語で指定されています。

親子要素間の継承

lang属性は、親要素の設定が子要素にも継承されます。ただし、子要素で明示的にlang属性を設定すると、その設定が優先されます。

<div lang="en">
  <p>This is in English.</p>
  <p lang="ja">この段落は日本語で書かれています。</p>
</div>

この例では、最初の段落はen（英語）として扱われ、2番目の段落はja（日本語）として扱われます。

JavaScriptを使用した制御

lang属性は、JavaScriptを使用して動的に変更することができます。

<p id="text" lang="en">This text is in English.</p>
<button id="switch-lang">言語を切り替える</button>

<script>
  const text = document.querySelector("#text");
  const switchLang = document.querySelector("#switch-lang");

  switchLang.addEventListener("click", () => {
    if (text.lang === "en") {
      text.lang = "ja";
      text.textContent = "このテキストは日本語です。";
    } else {
      text.lang = "en";
      text.textContent = "This text is in English.";
    }
  });
</script>

この例では、ボタンをクリックすることで、lang属性と要素の内容を切り替えます。

HTML文書全体の言語指定

HTML文書全体の言語は、<html>要素のlang属性で指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>言語指定の例</title>
</head>
<body>
  <p>この文書は日本語です。</p>
</body>
</html>

この例では、文書全体がja（日本語）として扱われます。

注意点

言語コードは正確に指定する必要があります。曖昧なコードや誤ったコードを使用すると、期待した動作が得られない場合があります。
アクセシビリティやSEOの観点から、適切なlang属性を指定することが推奨されます。
lang属性をフォント指定の目的で用いてはいけません。CSSのFONT関連プロパティを用いて指定します。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献