「それ、本当に日本語ですか？」HTMLのlang属性がWebサイトの未来を変える理由

Web制作を始めたばかりの頃、エディタに表示される「`lang=”en”`」という見慣れない記述。「これって何だろう？まあ消しても動くし、とりあえずそのままにしておこう」とスルーしていませんか？

実はその小さなコード、Webサイトという「お店」の看板に正しい言語を書くか、それともデタラメを書くかというくらい、非常に重要な役割を担っているんです。今回は、なぜ`lang`属性がこれほどまでに大切なのか、その理由を紐解いていきましょう。

—

`lang`属性は、ブラウザへの「自己紹介」

`lang`属性（Language attribute）とは、一言でいえば「このページ、何語で書かれていますか？」というブラウザへの自己紹介です。

想像してみてください。あなたは今、海外のレストランに入りました。メニューが何語で書かれているか分からなければ、どうやって注文すればいいか悩みますよね？

ブラウザも同じです。`lang=”ja”`（日本語）と書かれていれば、「お、ここは日本語のサイトだな。じゃあ日本語用のフォントで表示して、読み上げソフトには日本語で喋ってもらおう！」とスムーズに準備ができます。

正しい書き方はとってもシンプル

HTMLの冒頭にある``タグの中に書くのが基本です。

こんにちは、世界！

たったこれだけ。これだけで、あなたのWebサイトは「私は日本語で話すサイトです！」と堂々と宣言できるようになったんです。

—

放置すると何が起きる？ 3つの「困ったこと」

もしこの指定を忘れたり、間違えて英語のまま（`lang=”en”`）にしておくと、どんなことが起きるのでしょうか。現場でよく遭遇する「残念な現象」を3つ紹介します。

1. フォントが「中華フォント」に化けてしまう

これが一番「うわっ！」と驚くポイントかもしれません。ブラウザは`lang`を見て「あ、このサイトは中国語のサイトだ」と勘違いすると、日本語の漢字を中国語の書体（いわゆる中華フォント）で表示してしまうことがあります。「直」や「骨」といった漢字の書き順や形が微妙に違って見え、「あれ、なんかデザインが変だな？」と違和感を感じたことはありませんか？ それ、実は`lang`属性が原因かもしれません。

2. ハイフネーション（単語の改行）が崩れる

英語などの欧米言語では、単語の途中で改行する際、「-（ハイフン）」を使って繋ぎますよね。`lang=”en”`と正しく設定されていれば、ブラウザが賢く単語の区切りを判断して改行してくれます。もしここが適当だと、変な場所で単語がぶった切られてしまい、読みづらいサイトになってしまうんです。

3. スクリーンリーダー（読み上げ機能）が迷子になる

視覚に障がいのある方が使う「スクリーンリーダー」という読み上げソフト。これ、実は`lang`属性をめちゃくちゃ頼りにしています。もし日本語のサイトなのに英語と誤認されると、ソフトが英語のイントネーションで日本語を無理やり読み上げようとして、まるで外国人がカタコトで日本語を話しているような、大変聞き取りづらい音声になってしまうのです。

—

まとめ：あなたの優しさが、Webのアクセシビリティを作る

「たかが1行、されど1行」。
Web制作は、こうした細やかな配慮の積み重ねです。`lang=”ja”`と書くことは、単にブラウザの設定を正すだけではありません。

• 世界中のどんな環境の人にも、正しい漢字を見せる
• 読み上げソフトを使う方にも、自然な日本語を届ける

これって、とても温かくて素敵な「おもてなし」だと思いませんか？

明日からコードを書くときは、一番最初の``タグをチラッと確認してみてください。「お、ちゃんと挨拶できてるね！」と確認できたら、それだけであなたはもう、立派なフロントエンド・エンジニアの第一歩を踏み出しています。

難しく考えすぎなくて大丈夫ですよ。まずは今日から、`lang=”ja”`を忘れずに添えてあげる。その小さな習慣が、あなたの作るWebサイトをぐっとプロフェッショナルなものに変えてくれるはずです！