HTML lang属性：正しい理解と使用方法

定義と使い方

lang属性は、
要素のコンテンツおよびテキストを含むすべての要素属性に対するデフォルトの言語（language）を指定します。この属性を使用することで、スクリーンリーダーやブラウザ、検索エンジンなどが利用する（人間向けの）コンテンツ言語情報を提供できます。

特徴

すべてのHTML要素に指定できるグローバル属性です。
lang属性の値は、子孫要素に継承されます。
lang属性のデフォルト値はunknown（不明）であるため、常にこの属性には適切な値を指定することを推奨します。
属性値が空文字列（lang=""）の場合、言語はunknown（不明）に設定されます。

lang属性を使用することで、次のような利点があります。

スクリーンリーダーがWebページの言語を認識し、その言語に適した音声で読み上げることができます。
Chromeなどのブラウザに搭載されている自動翻訳機能を使用する際、Webページの言語を自動的に検出して翻訳できます。
検索エンジンがWebページの言語を認識し、その言語に基づいた検索結果を提供できます。

例

lang属性の使用例を見ていきましょう。

ページの基本言語の指定

ページ内テキストの基本言語を指定する場合は、常にルート要素である<html>タグにlang属性を指定してください。

<html>タグは文書の最上位に位置するタグであるため、<head>タグや<body>タグなどから継承の影響を受けません。

ページに別の言語で書かれたコンテンツが含まれている場合

ページ内に異なる言語で記述された内容が含まれている場合は、その内容を囲む要素にlang属性を追加します。

コード補足説明
<span>タグは、それ自体には特別な意味を持たないインラインコンテナであり、単純なテキストやインラインコンテンツなどに対して、スタイルや属性、スクリプトを適用するための範囲を指定する目的で使用されるタグです。

これにより、特定のコンテンツのみに異なる言語を指定できます。

注意点

lang属性を使用する際には、いくつかの注意点があります。

テキストを含む属性にも適用される

lang属性は要素のコンテンツだけでなく、すべての要素属性に対する基本言語も指定します。

以下の例では、lang属性がコンテンツだけでなく、title属性のテキストもスペイン語として扱われることを示します。
これは明らかに誤りです。

HTML 悪いコードです。コピーしないでください！

<a lang="es" title="スペイン語" href="qa-html-language-declarations.es">Español</a>

代わりに、異なる言語で記述されたテキストを含む属性は別の要素に移動してください。次の例のように、<a>タグは<html>タグに指定されたlang="ja"の設定を継承します。

コンテンツの周囲に適切なマークアップがない場合

特定のコンテンツの言語を指定したいものの、その周囲にマークアップがない場合は、該当するコンテンツを<span>、<bdi>、<div>などのHTMLタグで囲むことができます。これにより、そのコンテンツの言語を明示的に指定できます。

`lang`属性値

すべてのユーザーエージェント（ブラウザ）がどの言語を示しているのかを正しく認識できるようにするため、lang属性の値を指定する際は標準的な方法に従う必要があります。また、綴りや発音の点で大きな違いがあるアメリカ英語とイギリス英語の違いのように、言語間の方言差を標準的な形式で参照する方法についても考慮する必要があります。

lang属性の値は、Tags for Identifying Languages（BCP47）という仕様で定義されている「language tags（言語タグ）」の値です。

このタグは、次のような形式を取ります。

HTML lang属性値の形式例

<!-- 言語タグのみを使用する場合 -->
<p lang="ja">こんにちは！</p> <!-- 必須 -->

<!-- 言語タグと地域サブタグを使用する場合 -->
<p lang="en-US">Hello!</p> <!-- 任意 -->

<!-- 言語タグと文字体系サブタグを使用する場合 -->
<p lang="ja-Kana">こんにちは</p> <!-- 任意 -->

言語タグ（Language subtag）

必須です。
2文字で構成される言語コードで、例えば英語はen、スペイン語はesと表記されます。

この言語コードの一覧はISO 639-1で整理されています。

地域サブタグ（Region subtag）

任意です。
言語タグの中で特定の地域の方言を定義し、国コードに一致する2文字の全大文字、または国以外の地域を表す3桁の数字で構成されます。

例えば、en-USは「アメリカで使用される英語」という意味です。また、es-013は「中米で使用されるスペイン語」という意味です。

この地域サブタグコードは、Language subtag lookupで確認できます。

文字体系サブタグ（Script subtag）

任意です。
言語の文字体系を示し、常に4文字で、先頭の1文字は大文字です。

例えば、ja-Kanaは日本語が仮名文字（kana characters）で書かれていることを示す値です。

`lang="ja-JP"`

Webページのコンテンツが、日本で使用される日本語で書かれていることを示します。

ja-JPは日本の地域に対応した日本語を示し、jaは特定の地域に限定されない一般的な日本語を示します。どちらを使うかは状況によります。特定の地域や地域特性を強調したい場合はja-JPを使用するのが適している場合があります。しかし、単に一般的な日本語を示すだけであれば、jaだけで十分です。

ブラウザ互換性

lang属性のブラウザ互換性
属性	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`lang`	1	12	1	4

仕様書

lang属性の仕様書
仕様書
`lang`	HTML Standard #attr-lang

HTML lang属性：正しい理解と使用方法

定義と使い方

特徴