HTMLのlangで文章の言語を指定する：ページ全体と英文の範囲を分ける

日本語のページを作ったのに、ひな形の先頭にはlang="en"が残っていた。HTMLのlangで文章の言語を指定する作業は、画面の文章を翻訳することとは違います。本文に合う言語を文書全体へ指定し、一部分だけ異なる場合はその範囲を絞って示します。

この記事では、架空の小さな紙の展示室の案内を使います。HTMLの開始タグ、終了タグ、属性が分かる人向けです。日本語が中心で英語の案内文が一段落あるページを作り、言語の指定がどこまで届くかを確かめます。翻訳機能や言語切り替えメニューは実装しません。

ページの主な言語をhtml要素に指定する

langは、要素の内容がどの言語で書かれているかを示す属性です。日本語ならja、英語ならenを使います。国の名前をそのまま書く欄ではないので、日本語を表すつもりでjpとは書きません。

MDNのlangの説明では、言語タグを使って指定することや、読み上げなどへの関わりを確認できます。指定に合わせて発音が選ばれる手掛かりにはなりますが、実際の音声や切り替わり方は利用環境にも依存します。属性を付けただけで聞き取りやすさまで確認済みにはしません。

ページ全体の既定の言語はhtml要素へ置きます。W3CのHTMLでの言語指定では、bodyだけに付けるとhead内の文字を含められない点が説明されています。本文だけでなく、ページのtitleも含む土台としてhtmlへ指定します。

子の要素に別の指定がなければ、親から言語が引き継がれます。これを継承と呼びます。日本語の段落ごとにlang="ja"を繰り返す必要はありません。まず全体の土台を決め、異なる箇所だけを確かめると、指定の意図を追いやすくなります。

日本語の中にある英語一段落だけを囲む

次をlanguage-practice.htmlという新しいファイルに保存して開きます。文書全体の例です。日本語の案内に続けて、英語の説明が一段落、その後に日本語の補足が戻る構成にしています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>紙の展示室｜言語指定の練習</title>
</head>
<body>
  <main>
    <h1>紙の展示室（架空の練習例）</h1>
    <p>この部屋では、手で作った紙の作品を紹介しています。</p>
    <p lang="en">This room displays handmade paper works.</p>
    <p>掲載内容は練習用です。実際の施設案内ではありません。</p>
  </main>
</body>
</html>

htmlのjaは文書全体の基準です。英語のpだけがenを持ち、その後の日本語のpはhtmlからjaを受け継ぎます。一つ前の兄弟要素に付けたenが、後ろの段落へ順番に伝わるわけではありません。

この関係を「文書＝ja、英語の段落＝en、最後の段落＝ja」とメモします。三行をソース上で指せれば、どの範囲へ別指定が必要かを説明できます。画面では同じ文章が表示されるため、字の形が変わったかだけでは正誤を判定できません。

一つの日本語の文中に英語の文を埋め込むなら、必要な部分だけをspanで囲む方法があります。たとえば「案内文は」に続く英語の一文だけをspan lang="en"で囲み、その後ろの日本語は外へ出します。段落全体が英語なら、上の例のようにpへ直接付ける方が範囲を読み取りやすくなります。

英語指定が日本語まで広がる失敗を切り分ける

最初の失敗は、英語の段落を含むmain全体にlang="en"を付けることです。中にある日本語の見出しや補足まで、別の指定がなければ英語として扱う範囲に入ります。英語が一つ含まれているから、その親全体も英語という判断にはしません。

修正ではmainのenを取り除き、英語のpだけへ置きます。再確認は、見出しからhtmlまで親をたどってjaに届くこと、英語のpではenに届くこと、最後の補足もjaに届くことです。単に「enがファイルのどこかにあるか」を検索するだけでは、この範囲の誤りは見つけられません。

二つ目の失敗は、日本語のひな形へ直したつもりで、bodyだけをjaにしてhtmlにenを残すことです。本文は日本語の指定でも、head内の日本語titleは土台のenが残ります。修正はhtmlをjaへ合わせ、不要になったbodyの指定を取り除くことです。

直した後は、headとbodyの両方に目を向けます。titleをページの内容に合わせる記事は文書名そのものの点検ですが、今回はその名前をどの言語として扱うかが確認対象です。見えるタイトルが正しいことと、言語の指定が正しいことを一つのチェックにまとめないでください。

言語指定と文字コード、翻訳を混同しない

例にはmeta charset="utf-8"もあります。charsetは文字コードの指定で、langは文章の言語を示す指定です。日本語が表示できるからlangも日本語になっている、とは判断できません。逆にlangをjaへ変更しても、英語の文章が自動で日本語へ訳されるわけではありません。

英文を一段落掲載する今回の範囲なら、文書の既定値と部分指定の二段階で考えられます。英語版の別ページを作る場合は、そのページ全体の文章とtitleを確認し、主な言語を決め直します。URLの名前だけが英語でも、内容が日本語ならそれだけでenを選ぶ理由にはなりません。

アルファベットを見つけるたび、機械的にenを付ける方針も避けます。商品名、略語、プログラムの識別子などは、単に文字種だけで言語を判断できないことがあります。ここでは言語が明確な英文一段落を対象とし、迷う語は文脈と読み方を別に確認します。

ページ全体の読みやすさは言語指定だけで決まりません。見出しの順序を整える記事で扱う話題の構造なども、別の点検として必要です。今回の成果物は、文章の並びを作り直すものではなく、既存の文章と言語の範囲を照合する小さなページです。

英語の段落の前後で、日本語指定へ戻るか

例のページにもう一つ日本語の段落を足します。言語属性は追加せず、次の条件を確認してください。解答は、追加段落もhtmlからjaを受け継ぐことです。

• htmlの値がjaで、日本語のtitleを含む文書全体の基準になっている。
• 英語の一段落だけがenで、その外の日本語はenの要素に囲まれていない。
• 追加した日本語の段落は、自分に属性がなくても親をたどるとjaへ届く。
• langだけを変えても本文の文章は自動翻訳されず、原稿と同じ内容を表示している。

読み上げ環境を利用できるなら、日本語、英語、日本語の順に聞き、使ったブラウザー、音声、設定と結果を記録します。利用できない場合は「属性の範囲は確認、音声は未確認」と残してください。アクセシビリティの無料レッスンで確認を広げる場合も、指定した事実と実際に聞いた結果を分けて扱いましょう。