【lang属性】指定した要素の言語を指定する。「HTML・属性・初心者向け」
nobreco
lang属性とは
lang属性は、HTMLページ全体の言語を指定できる属性です。
またHTMLページ全体の言語を指定できるだけでなく、HTML内で使用する要素自体にも直接指定して使用することが可能です。
言語の指定には、BCP47の言語タグを指定することで、対応する言語を指定することができます。
【仕様】
★属性の区分
グローバル属性
★対応ブラウザ
・Chrome
・Firefox
・Internet Explorer
・Opera
・safari
【使用目的】
HTMLページ全体や、要素自体の内容がどのような言語で記述されているかを表す場合に使用します。
もう少し詳しく言うと、HTML要素で使用する言語の種類を選択できるということです。
lang属性の値にIETF言語タグ、もしくは空文字列を指定できます。
ちなみに空文字列を指定した場合には、第一言語が不明であるという意味になります。
【使用上の注意点】
① SEO対策の効果として、lang属性を指定して得られる効果はありません。
Googleはlang属性の識別をしていないということが、オンラインカンファレンスで発表されています。
② hreflang属性の指定が必要な場合
日本語だけでなく、英語や中国語に切り替えてWebサイトを表示する場合には、hreflang属性が必要になります。
hreflang属性は、以下の要素に指定することが可能です。
・<a>
・<link>
srclang属性は以下の要素に指定することが可能です。
・<track>
③ HTMLページ全体を表すHTML要素にはlang属性の指定が推奨されています。
例えばWebページ全体の内容が日本語である場合は以下のように記述します。
開始タグの中にlang属性を使い、属性値には日本語を意味する「ja」を使う。
<html lang="ja">
このように記述することで、「このHTMLページの内容は日本語で書かれています」という意味になります。
【指定できる要素】
lang属性はグローバル属性なので、すべてのHTML要素に指定することができます。
ただし、使用頻度はHTMLタグに指定する機会が多いです。
【対応できる言語】
| 値 | 言語の種類 |
| ar | アラビア語 |
| de | ドイツ語 |
| en | 英語 |
| es | スペイン語 |
| fr | フランス語 |
| it | イタリア語 |
| ja | 日本語 |
| ko | 韓国語 |
| pt | ポルトガル語 |
| ru | ロシア語 |
| th | タイ語 |
| tr | トルコ語 |
| vi | ベトナム語 |
| zh | 中国語 |
【言語と国を組み合わせる】
| 値 | 読み方 |
| en-AN | 英語で国はオーストラリア |
| en-CA | 英語で国はカナダ |
| en-GB | 英語で国はイギリス |
| en-NZ | 英語で国はニュージーランド |
| en-SG | 英語で国はシンガポール |
| en-US | 英語で国はアメリカ |
| fr-CA | フランス語で国はカナダ |
| fr-FR | フランス語で国はフランス |
| ja-JP | 日本語で国は日本 |
| ko-KP | 韓国語で国は北朝鮮 |
| ko-KR | 韓国語で国は韓国 |
| pt-BR | ポルトガル語で国はブラジル |
| pt-PT | ポルトガル語で国はポルトガル |
| th-TH | タイ語で国はタイ |
| zh-cmn-Hans | 中国語-普通話-簡体字 |
| zh-cmn-Hans-CN | 中国語-普通話-簡体字（中国大陸） |
| zh-cmn-Hant | 中国語-普通話-繁体字 |
| zh-cmn-Hant-TW | 中国語-台湾華語-繁体字（台湾） |
| zh-yue-Hant | 中国語-広東語-繁体字 |
| zh-yue-Hant-HK | 中国語-広東語-繁体字（香港） |
※ちなみに、地域サブタグの指定は必須ではありません。
指定する場合は、言語サブタグの値の後に「-（ハイフン）」を付け、その後に地域サブタグの値を記述します。
★旧HTMLからの変更点
HTML5から、version属性が廃止されて、manifest属性が追加されましたが、HTML5.1ではmanifest属性が廃止されました。
実用例
■lang属性の記述例
★htmlタグに使用した例
もっとも多用するのはこの記述の仕方かと思います。
webサイトを制作する際、<!DOCTYPE html>の後に<html>要素を記述するのですが、この<html>~</html>という開始タグの方にlang属性を記述します。
ここでは、日本語を表す「ja」を属性値として指定していますが、前述した一覧表に書いてある通り、必要に応じて言語の種類は選択することができます。
この記述をすることで、このHTMLページの全体が日本語で表しているという意味に解釈させることができます。
英語などは日本語と文法上の書き方が異なりますので、webサイトを制作したりする上で、言語の変更指定は必須と言って容良いでしょう。
まとめ
この記事では、lang属性についての解説を致しました。
このタグはwebサイトであるページ全体の言語を指定できる他、<p>要素などにも直接指定することができます。
特によく記述するであろう<html>タグの中で使用することは、webサイトを作る際に必須事項になってきます。
この機会に最低限必要な言語の種類などを覚えておきたいですね。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん☺
