隣のセマンティックウェブ

セマンティックウェブとは Web の情報を意味的に構造化すること

というと HTML も意味的に構造化されているのでそれでいいじゃん、ってなるんですが、HTML は文書の構造を表現しているので、HTML でマークアップしただけではセマンティックウェブな HTML にはならないんです。

セマンティックウェブな HTML にするためには、文書の内容がわかるように構造化します。

すぐに役立つセマンティックウェブの例

例えば

<div> <h1>吾輩は猫である</h1> <dl> <dt>著者</dt> <dd>夏目漱石</dd> </dl> </div>

これはセマンティック HTML ですがセマンティックウェブな HTMLではないです。

これを

<div itemscope itemtype="https://schema.org/Book"> <h1 itemprop="name">吾輩は猫である</h1> <dl> <dt>著者</dt> <dd itemprop="author" itemscope itemtype="https://schema.org/Person">夏目漱石</dd> </dl> </div>

こうするとセマンティックウェブな HTMLになりました。

セマンティックにすると何がうれしいのか?

上の例では、h1 や dl だけが使われています。

h1 は見出しのことで、 dl は dt と dd が関係のあるものだと紐付けますが、見出しが何の見出しなのか、dt と dd がどんな関係なのかまではわかりません

これに対し下の例では、全体を囲む div に itemtype というのが付いてます。この中の https://schema.org/Book とは書籍についての構造化ルールが決められた URI(識別子)のことで、これを親要素につけることで、この中の情報は書籍に付いて書かれているんだということを表現しています

その結果、ただの見出しだった h1 は itemprop="name" で書籍名だと言うことがわかり、dd は itemprop="author" によってその本の著者だと言うことがわかるようになります。

書かれている意味がわかるようになると?

たとえば Web ページがみんなで使えるデータベースになります。

気儘にマークアップされた HTML だとある日突然全ての h1 が著者の名前になるかもしれませんが、共通のルールでマークアップされていれば、https://schema.org/Book の name は未来永劫書籍名のままです。

ほかにも

検索エンジンが見つけやすくなります。

本を探している人に本の情報だけを見せることができるようになります。

本に限らず、不動産、レシピ、好きな芸能人の情報など、探したい情報にピンポイントでアクセスできるようになっていきます。

しかしこれらはほんの手始めです。セマンティックウェブはもっといろんなことができるんです。