実行できるHTMLドキュメント: lang 属性

Q: html の lang 属性には何を書けばいいですか？

BCP 47 規格の言語コードです。日本語は ja、英語は en、スペイン語は es、フランス語は fr です。地域が重要なときだけ、en-US、en-GB、pt-BR のように地域を加えます。

Q: lang="en" と lang="en-US" のどちらを使うべきですか？

どちらも正しい値です。ほとんどの英語のページは en で十分です。綴り、日付、一部の単語の発音など、地域による違いが重要なときは en-US や en-GB を使います。

Q: lang 属性は SEO に影響しますか？

Google は、言語はテキストそのものから判定しており、lang 属性には頼っていないと説明しています。それでも正しく設定しましょう。ほかの検索エンジン、翻訳ツール、スクリーンリーダーが使います。ページの翻訳版同士をつなぐには hreflang のリンクを使います。

Q: 別の言語のテキストに印を付けるには？

そのテキストを囲む要素に lang を付けます: bon appétit 。スクリーンリーダーはそのフレーズの発音を切り替え、CSS では :lang(fr) でスタイルを付けられます。

Q: lang と hreflang の違いは何ですか？

lang は要素の内容が何語かを示します。hreflang はリンクに付け、リンク先のページが何語かを示します。サイトはこれを使って、ページの別の言語版を検索エンジンに伝えます。

ページの言語を指定する

<html> 要素に、ページを書いている言語のコードを指定した lang 属性を付けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

この属性はこの段落の見た目を何も変えませんが、ページの扱われ方を変えます。スクリーンリーダーは英語の音声で読み上げ、ブラウザは翻訳を提案するかどうかの判断に使い、スペルチェッカーは英語の辞書を選ぶのに使えます。これがないとツールは推測するしかなく、別の言語に設定されたスクリーンリーダーは英語のテキストを間違った発音で読み上げるかもしれません。日本語のページなら lang="ja" です。

言語コード

値は BCP 47 規格の言語タグです。ほとんどは 2 文字の言語コードで、その後に地域や文字体系を続けることもできます。

コード	言語
`en`	英語
`en-US`、`en-GB`	アメリカの英語、イギリスの英語
`es`、`es-MX`	スペイン語、メキシコのスペイン語
`pt-BR`	ブラジルのポルトガル語
`fr`、`de`、`it`	フランス語、ドイツ語、イタリア語
`ar`、`he`	アラビア語、ヘブライ語 (右から左に書く。下を参照)
`ja`、`ko`	日本語、韓国語
`zh-Hans`、`zh-Hant`	簡体字の中国語、繁体字の中国語

コードは大文字と小文字を区別しませんが、言語は小文字、地域は大文字で書くのが慣例です。地域は違いが重要なときだけ加えましょう。en だけで完全で正しい値です。

lang で目に見えて変わること

lang の効果のほとんどはソフトウェア向けですが、画面に現れるものもいくつかあります。<q> 要素の引用符は言語に従い、大文字小文字の規則も言語に従います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

行ごとに違うスタイルの引用符が付きます。最後の列では、同じ text-transform: uppercase が英語では「ISTANBUL」、トルコ語では「İSTANBUL」になります。トルコ語では大文字の i にも点が残るからです。トルコ語の行の lang を en に変えると点が消えます。自動のハイフネーション (CSS の hyphens: auto) も lang に依存します。単語をどこで区切れるかを知るには、ブラウザが言語を知る必要があるからです。

別の言語のフレーズに印を付ける

lang は <html> だけでなく、どの要素にも使えます。ある言語のページが別の言語のフレーズを引用するときは、そのフレーズを囲んで独自のコードを付けます。CSS では :lang() セレクターで言語を指定できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

スクリーンリーダーは「bon appétit」でフランス語の発音に切り替え、その後で英語に戻ります。:lang(fr) は fr-CA などのフランス語の変種にも一致し、祖先から言語を受け継いだ要素にも一致します。[lang="fr"] のような属性セレクターではそれを取りこぼします。

右から左に書く言語: dir

アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語は右から左に書きます。lang は言語を示し、dir 属性は書字方向を設定します。アラビア語のページ全体では、<html> に両方を付けます。

<html lang="ar" dir="rtl">

左から右に書くページの中にある短い右から左のフレーズには、それを囲む要素に両方を付けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

blockquote は右に揃い、緑のバーも右に移ります。border-inline-start が書字方向に従うからです。margin-left ではなく margin-inline-start のような論理プロパティを使えば、どちらの方向でもレイアウトが正しく保たれます。

lang と hreflang の違い

lang は要素の内容を説明します。hreflang はリンクに付け、リンク先のページを説明します。翻訳のあるサイトは、検索エンジンが各読者を正しい版に案内できるよう、すべての版を <head> に並べます。

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

翻訳された各ページも、それぞれの <html> に独自の lang を設定します。ドイツ語のページなら lang="de" です。

よくある間違い

lang を書かない。 多くのテンプレートが忘れています。すべてのページで doctype の隣に設定しましょう。
翻訳したページに lang="en" をそのまま残す。 英語と指定したドイツ語のページは英語の発音で読み上げられます。内容に合わせましょう。
国コードを言語コードとして使う。 lang="jp" や lang="gr" は日本語やギリシャ語ではありません。正しいコードは ja と el です。
lang で書字方向を決めようとする。 lang="ar" だけではテキストは右から左になりません。dir="rtl" を付けましょう。
lang="en_US" と書く。 区切りはハイフンです: en-US。

よくある質問

HTML の lang 属性は何をしますか？

要素の内容の言語を宣言します。スクリーンリーダーはこれを使って正しい音声と発音を選び、ブラウザは翻訳の提案、引用符の選択、ハイフネーションに使い、スペルチェッカーの中には辞書の選択に使うものもあります。

html の lang 属性には何を書けばいいですか？

BCP 47 規格の言語コードです。日本語は ja、英語は en、スペイン語は es、フランス語は fr です。地域が重要なときだけ、en-US、en-GB、pt-BR のように地域を加えます。

lang="en" と lang="en-US" のどちらを使うべきですか？

どちらも正しい値です。ほとんどの英語のページは en で十分です。綴り、日付、一部の単語の発音など、地域による違いが重要なときは en-US や en-GB を使います。

lang 属性は SEO に影響しますか？

Google は、言語はテキストそのものから判定しており、lang 属性には頼っていないと説明しています。それでも正しく設定しましょう。ほかの検索エンジン、翻訳ツール、スクリーンリーダーが使います。ページの翻訳版同士をつなぐには hreflang のリンクを使います。

別の言語のテキストに印を付けるには？

そのテキストを囲む要素に lang を付けます: <span lang="fr">bon appétit</span>。スクリーンリーダーはそのフレーズの発音を切り替え、CSS では :lang(fr) でスタイルを付けられます。

lang と hreflang の違いは何ですか？

lang は要素の内容が何語かを示します。hreflang はリンクに付け、リンク先のページが何語かを示します。サイトはこれを使って、ページの別の言語版を検索エンジンに伝えます。

HTML の lang 属性: 言語コードと、指定すると変わること