HTML5でよく聞く「セマンティック」ってなに!?

ずいぶん前から色々なところで耳にする「セマンティック」。
HTML5でセマンティックな云々、というのがよく言われますが、私は実際何のことかよく理解できていませんでした。
これがどういったものなのか、あらためて学んだことをまとめてみます。
どうやら、「セマンティックWeb」と深い関係にあるみたいです。まずはそこから見ていきましょう。

セマンティックWebとは

セマンティックWebとは、ひとことで言うと、Webページのデータを効率よく収集・解釈できるようにしよう、という構想のこと。

HTMLなどで記述された従来のWebページは、そこに含まれる情報が何を意味するのか、という明確さに欠け、コンピュータが内容を正確に理解することが困難でした。

例えば、ホームページに記載されている所在地。
昨今では会社を検索すると、検索結果の一覧画面で所在地や電話番号が表示されることがあります。
ですが、HTMLなどに会社の所在地をただ記載しただけでは、他の情報もある中で、どれが所在地なのかわかりませんよね。あるいは、「千葉」が千葉県を指すのか、千葉さんなのか、とか。。

そこで、セマンティックWebでは、Webページに記述される情報に対して、その情報がいったい何を意味するのかを表すデータを付け加えることにしました。
それにより、Webページ上の情報をより深く正確にコンピュータが検知・解釈でき、結果として、複雑で精度の高い検索を可能にしたり、情報の収集・活用をより効果的に行うことができるようになるとされています。

いつ、どこで始まった?

セマンティックWebは、Webを発明したティム・バーナーズ=リー氏により1990年代後期に提唱され、2000年頃から取り組みが始まったと言われています。
こうした動きは海外で始まり、日本では数年遅れて取り組みが広がったようですね。
現在では、ビッグデータを扱う行政や地方自治体をはじめ、多くの民間企業でも活用されているそうです。

具体的な内容

セマンティックWebでは、Webデータにメタデータを付与することで、それぞれの情報が何を意味するかを示します。
情報がなにを意味するかをコンピュータに伝えるということが、セマンティックWebの基本となる考え方みたいですね。

HTML5におけるセマンティック

HTML5では、上述したセマンティックWebの考え方に則って、Webページを構築することが推奨されています。
私たちWeb制作に関わる人にとっては、HTML5のタグやメタタグ、Microdataの記述などがセマンティックな要素となります。
わかりやすいものとしては、パンくずリストへのMicrodataの付与などは、みなさん経験があるのではないでしょうか。
私はあれもよく理解せずやっていましたが……

そして、HTML5で新たに追加されたタグの一部では、タグ自体が意味を持つようになりました。
article, aside, section, navなどですね。
これらの使い方についても、しっかりと確認しておきましょう。

HTML5のセマンティック要素については別記事で詳しく取り上げたいと思います。