Web ページを作るとき、ほとんどのテンプレートには <html lang="ja"> のような記述が最初から入っています。何気なく書かれているこの lang 属性ですが、実はスクリーンリーダーの読み上げや翻訳、フォントの選択など、さまざまな場面で効いてくる大切な属性です。あわせて、文字を書く方向（左からか右からか）を指定する dir 属性もあります。この記事では、どの HTML 要素にも付けられるグローバル属性である lang と dir について、何を指定するもので、なぜ重要なのかを初心者向けに解説します。
目次
lang 属性とは｜要素の言語を伝える
lang は、その要素の中身が何語で書かれているかを示すグローバル属性です。グローバル属性とは、特定の要素だけでなく、どの HTML 要素にも付けられる属性のことを指します。もっとも基本的な使い方は、ページ全体の言語を <html> 要素に指定することです。日本語のページなら lang="ja"、英語のページなら lang="en" と書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<p>このページは日本語で書かれています。</p>
</body>
</html><html> に lang を指定すると、その値がページ全体の既定の言語になります。ページの中に別の言語がまざっていなければ、基本的にはこの一行だけで十分です。逆に、この指定を忘れると、後述するように読み上げや翻訳の精度に影響することがあります。
なぜ lang が重要なのか
lang は、指定しても見た目がほとんど変わらないため軽視されがちですが、目に見えないところで多くの仕組みに使われています。代表的なものを見ていきましょう。
スクリーンリーダーの読み上げ言語
画面を読み上げる支援技術（スクリーンリーダー）は、lang の値を見てどの言語の音声で読み上げるかを切り替えます。たとえば日本語のページに lang="en" が指定されていると、日本語の文章を英語の発音ルールで読もうとして、内容がまったく聞き取れなくなることがあります。正しい言語を指定することは、アクセシビリティの基本の一つです。
翻訳・フォント・ハイフネーション
ブラウザの翻訳機能や翻訳サービスは、lang を手がかりに元の言語を判断します。また、ブラウザは言語に応じて適切なフォントを選んだり、英語などで単語を行末で分割する処理（ハイフネーション）を行ったりします。たとえば同じ漢字でも日本語と中国語では字形が異なることがあり、lang の指定によってより自然な字形が選ばれます。CSS の hyphens プロパティによる自動ハイフネーションも、正しい lang があってはじめて適切に働きます。
CSS の :lang() セレクタと SEO
CSS には :lang() という擬似クラスがあり、特定の言語の要素だけにスタイルを当てることができます。たとえば :lang(en) と書けば、英語部分だけフォントを変える、といった指定が可能です。これも lang の値をもとに判定されます。さらに、検索エンジンにとってもページの言語は重要な情報であり、適切にマークアップされていることは正しい言語での検索結果表示にもつながります。
部分的に別の言語を示す
lang は <html> だけでなく、ページの一部にも指定できます。日本語の文章の中に英語やフランス語のフレーズがまざるときは、その部分を <span> などで囲み、lang を付けると、その範囲だけ言語が上書きされます。これにより、スクリーンリーダーはその部分だけ発音を切り替えられます。
<p>
彼女は別れ際に <span lang="fr">Au revoir</span> と言った。
</p>この例では、ページ全体は lang="ja" のままで、Au revoir の部分だけがフランス語だと示されています。近い方の lang 指定が優先されるため、内側の <span> の言語がその範囲に適用されます。長い引用文や、複数言語が入り混じるページでは、こうした部分指定が読み上げや表示の品質を大きく左右します。
なお、言語が不明な場合には lang="" と空の値を明示的に指定する方法があります。これは「この部分の言語は分からない（親から受け継いだ言語も当てはめない）」という意味になり、ユーザーが入力した内容など、何語になるか事前に分からない箇所で使われます。単に lang を書かないのとは意味が異なり、「未知であること」を積極的に示せる点がポイントです。
言語コードの書き方｜BCP 47 言語タグ
lang に指定する値は自由な文字列ではなく、BCP 47 という規格で定められた「言語タグ」を使います。難しく聞こえますが、基本は「言語を表す短いコード」で、必要に応じて地域や表記の情報を追加できる、という仕組みです。
| 値 | 意味 |
|---|---|
ja | 日本語 |
en | 英語 |
en-US | アメリカ英語（言語 + 地域） |
en-GB | イギリス英語 |
zh-Hans | 簡体字の中国語（言語 + 表記） |
zh-Hant | 繁体字の中国語 |
このように、言語-地域 や 言語-表記 のようにハイフンでつなげて詳しく指定できます。ただし、多くの日本語サイトでは ja だけで十分です。必要以上に細かく指定する必要はなく、内容に合った正しいコードを選ぶことが大切です。
dir 属性とは｜文字表記の方向
dir は、文字を書き進める方向を指定するグローバル属性です。日本語や英語は左から右へ書きますが、アラビア語やヘブライ語などは右から左へ書きます。dir はこの方向をブラウザに伝えるためのもので、指定できる値は次の3つです。
| 値 | 意味 |
|---|---|
ltr | 左から右（left-to-right）。日本語・英語などの既定 |
rtl | 右から左（right-to-left）。アラビア語・ヘブライ語など |
auto | 中身の文字からブラウザが方向を自動判定する |
多くのページは ltr が既定のため、日本語や英語だけを扱うなら dir を意識する場面はあまりありません。dir が重要になるのは、右から左へ書く言語（RTL 言語）を扱うときや、どの向きの言語が入るか事前に分からないときです。
dir=”auto” が役立つ場面
dir="auto" は、要素の中身の最初の強い方向を持つ文字を見て、方向を自動的に決める値です。もっとも役立つのは、ユーザーが入力した文字列を表示するときです。掲示板のコメントやユーザー名など、何語で入力されるか分からない箇所に dir="auto" を付けておくと、アラビア語が入力されれば右寄せ・右から左、英語なら左から右、というように表示が自然に切り替わります。すべてのケースを完璧に判定できるわけではありませんが、言語が不定な入力欄では有力な選択肢です。
dir の効果を見てみる
言葉だけではイメージしにくいので、実際に dir の値を変えた段落を並べてみましょう。下のデモでは、ltr と rtl、そしてアラビア語に auto を指定した3つの段落を表示しています。rtl の段落は文章全体が右寄せになり、記号や数字を含む文の並び順が変わることを確認してみてください。
<p dir="ltr">これは dir="ltr"（左から右）の段落です。1 + 2 = 3</p>
<p dir="rtl">これは dir="rtl"（右から左）の段落です。1 + 2 = 3</p>
<p dir="auto">مرحبا بالعالم</p>
p {
border: 1px solid #ccc;
padding: 8px 12px;
margin: 8px 0;
}
このように、dir はただ文字を右寄せにするだけの見た目の指定ではなく、文章の論理的な向きそのものを切り替える属性です。CSS の text-align とは役割が異なり、句読点や数字の並び順、行の折り返しの起点なども含めて方向が決まる点が大きな違いです。
まとめ
lang と dir は、どの要素にも付けられるグローバル属性です。lang は要素の中身が何語かを示し、<html lang="ja"> のようにページ全体へ指定するのが基本で、必要に応じて <span lang="en"> のように部分的な言語も表せます。値には ja や en-US、zh-Hans といった BCP 47 の言語タグを使い、言語が不明なときは lang="" を指定できます。lang はスクリーンリーダーの読み上げ、翻訳、フォントやハイフネーション、:lang() セレクタ、検索エンジンへの情報提供など、見えない場所で幅広く役立ちます。一方の dir は文字表記の方向を ltr・rtl・auto で指定するもので、アラビア語などの右横書きや、言語が不定なユーザー入力を扱うときに重要になります。普段は意識しにくい属性ですが、正しく指定しておくことで、より多くの人にとって読みやすく伝わりやすいページになります。