バナー画像

HTML要素などに「lang=”ja”」などと書かれているのを見たことはないでしょうか。慣例的に指定されているlang属性。なんとなく記述しているものの、あまり意味は考えたことがないという方も多いはずです。そこで本記事では、HTMLにおけるlang属性の意義をメインに解説をしていきます。

本記事の要点
  • lang属性の概要
  • HTMLにおけるlang属性の意義
  • マイナーな属性についての解説

lang属性とは?

さっそくlang属性について、そのあらましを解説していきましょう。lang属性の役割を簡単に言うと「要素の中で使用する言語の種類を明示する」ということです。

日本のWebサイトであったとしても、日本語や英語、ほかにもいろいろな言語が使われていることがあります。要素に使用される言語ごとにlang属性で指定するということができます。

ポテパンダの一言メモ

もしかすると「html」要素内でしかlang属性が書かれているのを見たことがないという方もいるかもしれません。しかし、lang属性はほかにの要素、つまり「p」要素や「ul」要素などに追加することも可能です。考え方は「html」要素と同様で、その要素内で使用する言語に合わせて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属性に指定できる言語の種類を一部紹介しましょう。

また、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」属性は、番号リストの数字を反対にするためのものです。以下に例を示しましょう。

私の好きなスイーツをカウントダウン形式で発表します。

 

    1. アップルパイ

 

    1. ウエハース

 

    1. エクレア

 

    1. エンゼルケーキ

 

    1. カバーリングチョコレート

 

    1. カスタードプディング

 

    1. ガトーショコラ

 

    1. クッキー

 

    1. クリームホーン

 

    1. ショートケーキ

 

 

reversed属性がない「ol」タグでは、番号を1から順番にカウントアップします。しかし、reversed属性があることでカウントダウン形式となるのです。

onCopy:コピーアンドペーストを制御

「onCopy」属性は、ページ内要素に対するユーザーのコピーアンドペーストをコントロールするためのものです。以下に例を示しましょう。

私の好きなスイーツをカウントダウン形式で発表します。

 

    1. アップルパイ

 

    1. ウエハース

 

    1. エクレア

 

    1. エンゼルケーキ

 

    1. カバーリングチョコレート

 

    1. カスタードプディング

 

    1. ガトーショコラ

 

    1. クッキー

 

    1. クリームホーン

 

    1. ショートケーキ

 

 

onCopy属性に「return false」を指定した場合、onCopy属性を含む要素はコピーアンドペーストができなくなります。上記の例では、「ol」要素のコピーアンドペーストを制限することができます。また、以下のような指定も可能です。

私の好きなスイーツをカウントダウン形式で発表します。

 

    1. アップルパイ

 

    1. ウエハース

 

    1. エクレア

 

    1. エンゼルケーキ

 

    1. カバーリングチョコレート

 

    1. カスタードプディング

 

    1. ガトーショコラ

 

    1. クッキー

 

    1. クリームホーン

 

    1. ショートケーキ

 

 

onCopyに「alert」と表示するメッセージを指定することによって、アラートを表示させることができます。もちろん最初に紹介したコピーアンドペースト禁止の指定と組み合わせることもできます。

私の好きなスイーツをカウントダウン形式で発表します。

 

    1. アップルパイ

 

    1. ウエハース

 

    1. エクレア

 

    1. エンゼルケーキ

 

    1. カバーリングチョコレート

 

    1. カスタードプディング

 

    1. ガトーショコラ

 

    1. クッキー

 

    1. クリームホーン

 

    1. ショートケーキ

 

 

このようにユーザーからのコピーアンドペーストを制御することができる属性は、Webページのコンテンツを守る上では必要なこともあるでしょう。ぜひ、覚えておきましょう。

まとめ

本記事では、HTMLにおけるlang属性の意義をメインに解説をしていきました。lang属性をメインに解説しましたが、HTMLにはほかにも有用な属性がたくさんありますので、オフィシャルドキュメントなどを見ながら勉強してみることをおすすめします。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。