HTML要素などに「lang=”ja”」などと書かれているのを見たことはないでしょうか。慣例的に指定されているlang属性。なんとなく記述しているものの、あまり意味は考えたことがないという方も多いはずです。そこで本記事では、HTMLにおけるlang属性の意義をメインに解説をしていきます。
- lang属性の概要
- HTMLにおけるlang属性の意義
- マイナーな属性についての解説
lang属性とは？
さっそくlang属性について、そのあらましを解説していきましょう。lang属性の役割を簡単に言うと「要素の中で使用する言語の種類を明示する」ということです。
日本のWebサイトであったとしても、日本語や英語、ほかにもいろいろな言語が使われていることがあります。要素に使用される言語ごとにlang属性で指定するということができます。
lang属性の使用例
以下にlang属性の使用例を見てみましょう。
こんにちは
Hello
Hola
Bonjour
Cześć
Γεια σου
6つの「p」要素のlang属性の中に、それぞれ言語指定があることがお分かりでしょうか。このように、lang属性を使用して、要素内の言語を指定することが可能なのです。
lang属性を設定する意義
そもそも、なぜHTMLではlang属性を要素に対して指定するのでしょうか。実際、多くの人は要素1つ1つに対してlang属性を指定していないでしょう。つまり必要不可欠な属性であるわけではないということです。しかしHTMLの属性として実装されているということは、lang属性に何かしらの意義があるということです。こちらでは、lang属性を設定する意義を説明します。
言語をプログラムに明示できる
1点目は、要素内で使用されている言語がプログラムに対して明示できるということです。人の目で見てわかるというだけではなく、プログラムに対しても言語を理解させるということで文字化けなどの発生を避けられる可能性があります。
文字化けという観点から言うと、一部のブラウザでは言語の指定をしていなければ、文字のフォントを反映させられないという場合があります。もしもの場合を避けるため、lang属性を指定しておくというのはアリです。
自動翻訳時に有効
すでに一部のブラウザには自動翻訳の機能が取り入れられているものもあります。たとえばGoogle Chromeでは、lang属性が設定されていなかったとしても自動的に言語を感知して、翻訳することが可能です。
一方で今後Google Chrome以外のブラウザでも自動翻訳機能が追加される可能性があります。その際に、lang属性によって使用されている言語をプログラムに対して明示させておけば、それを手掛かりにブラウザのプログラムが言語翻訳をしてくれるようになることも予想できます。
すべての要素に対してlang属性を追加するというのは手間もかかりますし、可読性を下げてしまう恐れもあるため必要ありませんが、html要素に対して、そのファイルで主に使用される言語をlang属性で指定しておくというのは今後、有効になってくることが推察されます。
lang属性の種類
以下にlang属性に指定できる言語の種類を一部紹介しましょう。
- 英語→en
- フランス語→fr
- ドイツ語→de
- イタリア語→it
- ロシア語→ru
- 韓国語→ko
- アラビア語→ar
- トルコ語→tr
また、1つの言語に対して国の指定をすることも可能です。たとえば英語を使用している国にもアメリカ合衆国・カナダ・オーストラリアなどがあるように、lang属性でそれらの国を指定できるということです。以下にその一例を示しましょう。
Hello United States of America
Hello England
Hello Australia
Hello Canada
Hello New Zealand
Hello Singapore
上記の例のように言語コードの後に「-（ハイフン）」をつけ、その後に国コードを追加することによって、言語と国を明示することが可能です。
あまり知られていない属性まとめ
さてここからは、lang属性のようにあまりその役割が知られていない属性についていくつか紹介していきましょう。以下を参考にして、ぜひ属性を有効活用していってください。
dir：文字の表示方向を指定
「dir」属性は、要素内の文字の表示方向を指定するためのものです。以下に例を示しましょう。
こちらは左から文字を表示する属性指定です
こちらは右から文字を表示する属性指定です
dir属性に対して「ltr」を指定すると文字を左から表示をし、反対にdir属性に対して「rtr」を指定すると文字を右から表示をします。
reversed：番号リストの数字を逆転
「reversed」属性は、番号リストの数字を反対にするためのものです。以下に例を示しましょう。
私の好きなスイーツをカウントダウン形式で発表します。
-
- アップルパイ
-
- ウエハース
-
- エクレア
-
- エンゼルケーキ
-
- カバーリングチョコレート
-
- カスタードプディング
-
- ガトーショコラ
-
- クッキー
-
- クリームホーン
-
- ショートケーキ
reversed属性がない「ol」タグでは、番号を1から順番にカウントアップします。しかし、reversed属性があることでカウントダウン形式となるのです。
onCopy：コピーアンドペーストを制御
「onCopy」属性は、ページ内要素に対するユーザーのコピーアンドペーストをコントロールするためのものです。以下に例を示しましょう。
私の好きなスイーツをカウントダウン形式で発表します。
-
- アップルパイ
-
- ウエハース
-
- エクレア
-
- エンゼルケーキ
-
- カバーリングチョコレート
-
- カスタードプディング
-
- ガトーショコラ
-
- クッキー
-
- クリームホーン
-
- ショートケーキ
onCopy属性に「return false」を指定した場合、onCopy属性を含む要素はコピーアンドペーストができなくなります。上記の例では、「ol」要素のコピーアンドペーストを制限することができます。また、以下のような指定も可能です。
私の好きなスイーツをカウントダウン形式で発表します。
-
- アップルパイ
-
- ウエハース
-
- エクレア
-
- エンゼルケーキ
-
- カバーリングチョコレート
-
- カスタードプディング
-
- ガトーショコラ
-
- クッキー
-
- クリームホーン
-
- ショートケーキ
onCopyに「alert」と表示するメッセージを指定することによって、アラートを表示させることができます。もちろん最初に紹介したコピーアンドペースト禁止の指定と組み合わせることもできます。
私の好きなスイーツをカウントダウン形式で発表します。
-
- アップルパイ
-
- ウエハース
-
- エクレア
-
- エンゼルケーキ
-
- カバーリングチョコレート
-
- カスタードプディング
-
- ガトーショコラ
-
- クッキー
-
- クリームホーン
-
- ショートケーキ
このようにユーザーからのコピーアンドペーストを制御することができる属性は、Webページのコンテンツを守る上では必要なこともあるでしょう。ぜひ、覚えておきましょう。
まとめ
本記事では、HTMLにおけるlang属性の意義をメインに解説をしていきました。lang属性をメインに解説しましたが、HTMLにはほかにも有用な属性がたくさんありますので、オフィシャルドキュメントなどを見ながら勉強してみることをおすすめします。
もしかすると「html」要素内でしかlang属性が書かれているのを見たことがないという方もいるかもしれません。しかし、lang属性はほかにの要素、つまり「p」要素や「ul」要素などに追加することも可能です。考え方は「html」要素と同様で、その要素内で使用する言語に合わせてlang属性を指定することができます。