PR

【HTML】言語指定に使うlang属性とは?必要性や各国の一覧もご紹介!

WEB制作技術系

サイトの主要の言語を指定する際に使う、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属性を指定する事でいくつかメリットがありますのでご紹介します。

lang属性指定のメリット

・コンピュータに主要言語を伝えられる
・翻訳時に役立つ

コンピュータに主要言語を伝えられる

一般的にですが、コンピュータに対して言語を伝えておくことによって、文字化けなどの発生を抑えられる可能性があると言われています。

翻訳時に役立つ

海外のWEBサイトに訪問すると、画面に「このページを翻訳しますか?」というツールバーが表示された事はありませんか?

翻訳ツールバーイメージ画像
↑翻訳ツールバー

ブラウザは、lang属性の値を読んで、「何語から何語に翻訳するか」を判断していると言われています。

お助け猫
お助け猫

表示には影響はないものの、しっかりと指定してあげたほうが良さそうです。

各国の言語コード一覧

言語コードは、世界の言語をアルファベット2文字で表したものであると説明しました。

今回、一部ですが各国の言語コードをご紹介します。

言語コード
日本ja
英語en
中国語zh
韓国語ko
イタリア語it
スペイン語es
フランス語fr
↑言語コード一覧表

こんな感じで、言語によって言語コードは決まっていますので、サイトの主要の言語を変えたい場合は、「lang=”〇〇”」の〇〇の部分を書き換えてください。

まとめ

今回は、lang属性について執筆しました。

普段あまり意識しないポイントかもしれませんが、覚えておいて損はない内容かと思いますので、頭の片隅に入れておいていただければ幸いです。

コメント

タイトルとURLをコピーしました