HTML

The lang attribute tells browsers and assistive technologies which language a page is written in, improving speech synthesis, translation, and search results.

lang 属性

lang 属性とは何か
最もシンプルな使い方
基本ルール 5 つ
よく使うサブタグと応用
アクセシビリティでの役割
SEO & 多言語サイト
深掘りトピック
実装チェックリスト
コードスニペット集
テストとバリデーション
よくある誤解とアンチパターン
まとめ

lang 属性とは何か

目的

ブラウザー・支援技術・検索エンジンに「この要素（または文書）の自然言語」を伝える。

音声読み上げの発声、ハイフネーション、スペルチェック、フォント選択、翻訳提案などの挙動を最適化。

歴史的背景

HTML 4.0（1997）で登場。後に XHTML や HTML5 でも存続。

IETF の BCP 47（RFC 5646）が値（言語タグ）の書式を規定。

BCP 47: Best Current Practice 47。言語タグの標準化を目的とする。; ISO 639-1（言語コード）と ISO 3166-1（国コード）を組み合わせて使用。

IANA Language Subtag Registry

https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

RFC 5646 (Tags for Identifying Languages)

https://datatracker.ietf.org/doc/html/rfc5646

ISO 639-1（二文字の言語コード）

Wikipedia: List of ISO 639 language codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
ISO公式: ISO 639 言語コード: https://www.iso.org/iso-639-language-code

ISO 3166-1（アルファ-2 国コード）

Wikipedia: List of ISO 3166 country codes: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
ISO公式: ISO 3166 国コード: https://www.iso.org/iso-3166-country-codes.html

最もシンプルな使い方

HTML

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>こんにちは世界</title>
</head>
<body>
	<p>これは日本語のサンプルです。</p>
</body>
</html>

lang="ja" があるだけで、多くのスクリーンリーダーが日本語用 TTS を自動選択し、ブラウザーが日本語辞書でスペル確認します。

基本ルール 5 つ

１．三文字ではなく二文字で書く: lang="jp" は誤り。ISO 3166 の国コードではなく、ISO 639-1 の言語コードを使う（日本語は ja、英語は en）。
２．HTML ルートに必ず付ける: <html> に指定しないと文書全体の言語が未定義扱いになり、支援技術が誤判定する。
３．大文字小文字を区別しないが、小文字が慣例: lang="JA" でも動くが読みやすさのため小文字推奨。
４．複数言語を混在させる時はネストで個別指定: 例: <span lang="fr">Bonjour</span>; 子要素が親の言語を上書きする。
５．xml:lang との併用は極力避ける: 同じ要素に両方を書くと解析器によっては競合。HTML5 では lang だけで十分。

よく使うサブタグと応用

地域を指定してローカライズ差を明示

en-US（米国英語）、en-GB（英国英語）: 例: 日付フォーマットやスペリングの違いを示唆

スクリプトサブタグ

zh-Hans（簡体字中国語）、zh-Hant（繁体字）: アジア言語でフォント選択を正確に行うために使用されます。

変種（バリアント）

sr-Latn（ラテン文字セルビア語） vs. sr-Cyrl（キリル文字セルビア語）

私用サブタグ（x- プレフィックス）

ja-x-companyfoo: 社内 CMS にだけ通じる特殊タグを定義可能

アクセシビリティでの役割

スクリーンリーダーは段落単位で TTS エンジンを切り替える。<blockquote lang="de">Guten Tag!</blockquote> がないとドイツ語が片仮名読みされてしまう。

自動ハイフネーション : 英単語の改行位置が正しくなるのは lang="en" があるから。

WCAG 2.2 達成基準 3.1.1 / 3.1.2: ページ全体と各パートの言語識別が必須。未設定は A 重大エラー扱い。

SEO & 多言語サイト

hreflang リンクとの違い: lang は文書の内容が何語で書かれているか; hreflang は検索エンジンに「別 URL の各翻訳版」を教える; 両方必要。lang を誤ると Google が自動翻訳判定し順位が下がることも。
<meta name="content-language"> は廃止方向: HTML4 遺産。HTTP Content-Language ヘッダーまたは lang を使うのが現代的。
言語別 URL 構成パターン: /ja/ ディレクトリ、.ja.html サフィックス、サブドメイン ja.example.com の長所短所

深掘りトピック

BCP 47 の構文と正規化

基本文法: 言語-スクリプト-地域-バリアント (language-script-region-variant)
拡張サブタグ（u-、t- など）: 例: zh-CN-u-nu-hanidec（漢数字表記を希望）
正規形へ正すアルゴリズム: 言語タグフィルタリング、照合（Lookup vs. Filtering）。

SPA/SSR と動的言語切替

React/Vue/Next.js で document.documentElement.lang を再帰的に変更すると、読み上げエンジンが途中で切り替わる問題に注意。

Nuxt 3 / Next 14 では useHead({ htmlAttrs: { lang: 'ja' } })。SSR 時に静的タグを書き出すと CLS を防げる。

多言語フォームと自動翻訳ブロック

Chrome の自動翻訳を抑止するには translate="no" や HTTP Content-Language を併用。誤設定するとユーザ入力が勝手に翻訳され、脆弱性の温床に。

国際法・法令

EU「Web アクセシビリティ指令」、日本「障害者差別解消法ガイドライン」では言語識別が義務的。

中国向けサイトの政府検閲フィルタは言語タグを使いアクセス制限する例がある。

実装チェックリスト

<html lang="…"> を必ず設定した
文章中の引用語・固有名詞に <span lang> を入れた
値は BCP 47 正規形 (en-US など)
hreflang、HTTP Content-Language と矛盾しない
自動テスト（axe-core / Lighthouse / W3C Validator）で警告ゼロ
動的レンダリングで lang が常に最新状態
CMS 入力時に言語タグを検証・補完する仕組みを用意

コードスニペット集

引用内外国語をアクセシブルに

HTML

<p>
	日本語版 Wikipedia は
	<cite lang="en">Wikipedia</cite>
	を日本語化したものです。
</p>

Vue コンポーネントで自動切替

HTML

<template>
	<div :lang="currentLang">
		<slot />
	</div>
</template>

<script setup>
import { watchEffect } from 'vue';
const props = defineProps({ currentLang: String });

watchEffect(() => {
	document.documentElement.lang = props.currentLang;
});
</script>

サーバーレイヤで Accept-Language 判定（Node.js）

JavaScript

import Negotiator from 'negotiator';

export function detectLanguage(req) {
	const negotiator = new Negotiator(req);
	return negotiator.language([
		'en', 'ja', 'fr', 'zh-Hans', 'zh-Hant'
	]) || 'en';
}

テストとバリデーション

ブラウザー拡張: Axe DevTools、WAVE で WCAG 3.1 をチェック。
スクリーンリーダー実機: NVDA（Windows）、VoiceOver（macOS/iOS）で発声言語を確認。
検索エンジンインスペクション: Google Search Console → URL 検査 → 「表示された HTML」を確かめ、lang 正常反映を確認。
静的解析: CI パイプラインに HTMLHint の attr-lowercase, lang-requires-quotations ルールを入れる。

よくある誤解とアンチパターン

<meta charset> があれば lang は不要: 文字エンコーディングと自然言語は別物。
lang="ja-JP" が SEO に必須: 地域サブタグは必須ではなく、実際に地域差がある場合のみ使う。
自動翻訳ウィジェットがあるから不要: TTS や辞書は翻訳サービスを通らない。
lang を複数並べて書く: HTML は lang 属性を複数値で持てない。最も適切な一つを指定するか、要素を分ける。

まとめ

lang 属性は「ただの言語宣言」と侮れない――適切に設計・維持することで

アクセシビリティ向上（WCAG 準拠）
国際 SEO 強化
自動翻訳や辞書機能の品質向上
法令遵守のリスク回避

を同時に達成できます。シングルページアプリやグローバル展開が当たり前になった今こそ、「最初に作ってそのまま」ではなく、ビルド・デプロイ・運用パイプラインに lang 管理を組み込むことが、フロントエンドの成熟度を測る指標と言えるでしょう。

Home

HTML (HyperText Markup Language)

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

<!DOCTYPE>: 書かれた HTML文書が、どのバージョンで書かれたものかを宣言します。（文書型宣言）
blockquote 要素: 文章や他サイトなどからの抜粋をブロックレベルで明示し、文書構造上の意味付けと可読性の向上を同時に実現するために使われる引用要素です。
body 要素: ドキュメントの本文
cite 要素: 引用元のタイトルや作品名。
head 要素: ドキュメントのメタデータを格納します。
html 要素: Webページのルート要素であり、全ての要素を囲む親要素です。
meta 要素: その文書に関する情報（メタデータ）を指定する際に使用します。
p 要素: 文章を論理的な段落として区切り、ブラウザや支援技術に「ここで話題が切り替わる」と伝えるためのタグです。
span 要素: 一般的なテキスト範囲。
title 要素: ドキュメントのタイトル

CSS (Cascading Style Sheets)

ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。

JavaScript

ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。

document: ドキュメントを参照する。

PHP (Hypertext Preprocessor)

サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。

HTML

lang 属性

lang 属性とは何か

最もシンプルな使い方

基本ルール 5 つ

よく使うサブタグと応用

地域を指定してローカライズ差を明示

スクリプトサブタグ

変種（バリアント）

私用サブタグ（x- プレフィックス）

アクセシビリティ での役割

SEO & 多言語サイト

深掘りトピック

BCP 47 の構文と正規化

SPA/SSR と動的言語切替

多言語フォームと自動翻訳ブロック

国際法・法令

実装チェックリスト

コードスニペット集

引用内外国語をアクセシブルに

Vue コンポーネントで自動切替

サーバーレイヤで Accept-Language 判定（Node.js）

テストとバリデーション

よくある誤解とアンチパターン

まとめ

アクセシビリティでの役割