この記事でわかること

  • lang属性で、ページ全体の言語を伝える書き方
  • 英語の引用のように、ページの一部だけ言語が違うときの指定
  • 人の名前や専門用語など、指定しなくてよい語の判断
  • 指定したあとで、正しく伝わっているかを確かめる方法

Webページの言語を指定していないと、画面の読み上げのソフトが、日本語の文を別の言語の決まりで読もうとすることがあります。この記事では、HTMLのlang属性で、ページ全体と一部の言語を正しく伝える方法を紹介します。

内容は、2026年10月25日に、W3Cのアクセシビリティの基準(WCAG 2.2)の解説と技法、W3Cの国際化の資料、IANAの言語の登録簿で確かめました。特定のツールやスクールは扱いません。

先に結論: html要素にlang="ja"、違う言語の部分にもlangを付ける

先に結論を書くと、日本語のページは、html要素にlang="ja"を付けます。英語の引用のように言語が違う部分は、その部分を囲む要素にもlang属性を付けます。 書く場所をまとめると、次のとおりです。

何の言語か 書く場所
ページ全体 html要素
英語の引用 囲む要素
英語の1文 spanで囲む
人や商品の名前 不要
専門用語 不要

lang属性とアクセシビリティの基準

WCAGの達成基準3.1.1「ページの言語」は、各Webページの既定の言語を、プログラムで判別できるようにすることを求めています。レベルAの基準です。

言語が分かると、ブラウザや読み上げのソフトは、文字をより正しく扱えます。解説では、次の3つを挙げています。

  • 読み上げのソフトが、正しい発音の決まりを読み込める
  • ブラウザが、文字や書き方を正しく表示できる
  • 動画などの再生ソフトが、字幕を正しく表示できる

1つのページで複数の言語を使うときは、いちばん多く使う言語を、ページの既定の言語にします。同じくらいの量のときは、最初に使った言語を選ぶとしています。

ページ全体の言語はhtml要素に書く

技法H57は、html要素にlang属性を付けて、ページの既定の言語を示す方法です。W3Cの国際化の資料では、html要素に書いた言語は、ほかのすべての要素に引き継がれるとしています。

body要素ではなくhtml要素に書く理由も、同じ資料にあります。body要素に書くと、head要素の中の文字が含まれないためです。

言語の値は、IANAの言語の登録簿にある符号を使います。登録簿では、日本語は「ja」、英語は「en」です。技法H58では、英国の英語と米国の英語を「en-GB」と「en-US」のように分けて書けるとしています。ただし、大事なのは最初の符号で、後ろに付ける符号は必要なときだけで構いません。

部分の言語は囲む要素に書く

達成基準3.1.2「一部分の言語」は、文章の中の語句や段落の言語も、プログラムで判別できるようにすることを求めています。レベルAAの基準です。技法H58は、言語が変わる部分をlang属性で示す方法で、例としてドイツ語の引用をblockquote要素で囲み、lang属性を付けています。

次の見本は、架空の工房のサイトで、ページ全体を日本語にし、英語の1文と英語の引用に言語を付けたものです。実行するコマンドではなく、HTMLの書き方の例です。

<!doctype html>
<!-- ページ全体の言語は日本語 -->
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>工房の紹介 | 架空の木工房</title>
  </head>
  <body>
    <p>工房の合言葉: <span lang="en">Small steps every day</span></p>
    <blockquote lang="en">
      <p>Thank you for visiting our workshop.</p>
    </blockquote>
  </body>
</html>

言語を指定しないと、読み上げのソフトは、その語を自分の既定の言語で読もうとします。W3Cの解説では、フランス語で車を意味する「voiture」を、英語を既定にした音声が「voyture」と読んでしまう例を挙げています。

指定しなくてよい語の判断

達成基準3.1.2は、すべての外国語に指定を求めるものではありません。次のものは、基準の対象から外れます。

  • 人や商品、場所の名前: 名前は、ふつう言語の切り替えを指定しなくてよいとしています
  • 専門用語: ほかの言語に訳さずに使われることが多い語です
  • まわりの言語の一部になっている語: 解説では、英語の文の中の「rendezvous」は、フランス語と指定しなくてよい例として挙げています

判断の目安は、「その部分を、まわりの言語の読み方で読んでも通じるか」です。解説では、1語だけのときは、言語を変えるつもりがはっきりしている場合を除いて、まわりの言語の一部と考えるとしています。英語の1文や引用のように、まとまった文になっているときは指定します。

迷う語が多いサイトや、複数の言語でページを作るサイトでは、どの語を指定するかの決まりを、サイトを作る人と文章を書く人で先に決めておきます。

指定したあとの確かめ方

技法H57の確かめ方は、html要素にlang属性があり、その値が言語の符号の決まりに合っていて、ページの主な言語を表しているかを見ることです。技法H58では、それぞれのlang属性の値が、その部分の言語と合っているかを確かめます。

ブラウザでページを開き、ソースの表示で、html要素と、英語の部分を囲む要素を見ると確かめられます。

つまずきやすいところ

  • テンプレートの言語のまま使う: 海外のテンプレートを使うと、html要素がlang="en"のままのことがあります。日本語のページは、値を「ja」に直します
  • body要素だけに書く: head要素の中の文字に言語が伝わりません。html要素に書きます
  • 読み上げの音だけで確かめる: 解説では、リンクの一覧のように、言語の切り替えが読み上げに伝わらない場面があるとしています。読み上げの音だけに頼らず、コードで言語が正しく指定されているかを確かめます
  • ページのタイトルの中を分けようとする: W3Cの国際化の資料では、title要素は文字しか書けないため、タイトルの一部だけ言語を指定することはできないとしています。タイトルの付け方は、Webデザインのページタイトルの付け方で紹介しています
  • 画像の中の英語を忘れる: 画像の中の文字は、代替テキストで伝えます。代替テキストの書き方は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています。見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法が参考になります
  • 表の中の英語の見出し: 表の見出しのセルが英語なら、そのセルにもlang属性を付けられます。表の見出しのセルの書き方は、Webデザインのテーブルの見出しの付け方で紹介しています

まとめ

  • 日本語のページは、html要素にlang="ja"を付けます。body要素ではなくhtml要素に書きます
  • 英語の引用や1文のように言語が違う部分は、囲む要素にもlang属性を付けます
  • 人や商品の名前、専門用語、まわりの言語の一部になっている語は、指定しなくて構いません
  • 読み上げの音だけに頼らず、ソースでlang属性の場所と値を確かめます