サイトの主要の言語を指定する際に使う、lang属性。
今回は、どうやって指定するのか、そもそも指定する必要性があるのか等を解説します。
lang属性とは？
lang属性とは、WEBサイトの主要の言語を指定する際に使用する属性です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>練習用ページ</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<h1>今日の天気</h1>
<p>晴れです。</p>
<script src="js/script.js"></script>
</body>
</html>上記のサンプルで、lang属性がどこにあるか分かりますでしょうか？
2行目に、「html lang=”ja”」と書かれているのにお気づきでしょうか？lang属性は、htmlタグに含まれるlang属性の言語コードを書き換えることによって指定できます。
後述しますが、言語コードとは、世界の言語をアルファベット2文字の記号で表したもので、指定する言語によって変わります。
・lang属性は、htmlタグに付ける！
・言語コードは指定する言語によって変わる！
言語コード指定の必要性って？
これって、絶対に指定しないといけないんですか？
lang属性を指定しないからと言って、表示上問題は無いです。しかし、lang属性を指定する事でいくつかメリットがありますのでご紹介します。
・コンピュータに主要言語を伝えられる
・翻訳時に役立つ
コンピュータに主要言語を伝えられる
一般的にですが、コンピュータに対して言語を伝えておくことによって、文字化けなどの発生を抑えられる可能性があると言われています。
翻訳時に役立つ
海外のWEBサイトに訪問すると、画面に「このページを翻訳しますか？」というツールバーが表示された事はありませんか？
ブラウザは、lang属性の値を読んで、「何語から何語に翻訳するか」を判断していると言われています。
表示には影響はないものの、しっかりと指定してあげたほうが良さそうです。
各国の言語コード一覧
言語コードは、世界の言語をアルファベット2文字で表したものであると説明しました。
今回、一部ですが各国の言語コードをご紹介します。
| 国 | 言語コード |
| 日本 | ja |
| 英語 | en |
| 中国語 | zh |
| 韓国語 | ko |
| イタリア語 | it |
| スペイン語 | es |
| フランス語 | fr |
こんな感じで、言語によって言語コードは決まっていますので、サイトの主要の言語を変えたい場合は、「lang=”〇〇”」の〇〇の部分を書き換えてください。
まとめ
今回は、lang属性について執筆しました。
普段あまり意識しないポイントかもしれませんが、覚えておいて損はない内容かと思いますので、頭の片隅に入れておいていただければ幸いです。
