MicroformatsとMicrodataの違いについて
Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。
セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、"どう違うのか"分かりづらかったのでまとめてみました。
そもそもMicroformats、Microdataとは?
マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。
例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。
ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。
Microformats、Microdataの仕様
MicroformatsとMicrodataは、扱えるフォーマット同じですが仕様が違います。
Microformats
HTMLに現実のニーズに応じた意味拡張を施すことを目的としてる。
HTMLのバージョンを気にせずに使える。
Microdata
HTML5に新たに追加された仕様。
HTMLのバージョンは(X)HTML5のみ使用可。
マークアップ例
例として、連絡先を記述するhCardでマークアップします。
Microformats
<div class="vcard">
<div class="fn">Tomoki Kubo</div>
<div class="adr">
<span class="region">Osaka</span>
<span class="country-name">Japan</span>
</div><!-- .adr -->
<div class="tel">000-0000-0000</div>
<a class="url" href="https://kojika17.com">htt://kojika17.com</a>
</div>
Microdata
<div itemtype="http://microformats.org/profile/hcard" itemscope>
<div itemprop="fn">Tomoki Kubo</div>
<div itemprop="adr" itemscope>
;span itemprop="region">Osaka</span>
;span itemprop="country-name">Japan</span>
/div><!-- "adr" -->
<div itemprop="tel">000-0000-0000</div>
<a itemprop="url" href="https://kojika17.com">htt://kojika17.com</a>
</div>
上の仕様でも記述しましたがフォーマットは同様のものが使用できます。
しかし主な違いとして、
- Microformatsでは、classを使用して意味づけを行う。
- Microdataでは、マイクロデータ用のグローバル属性(itemtype, itempropなど)で意味づけを行う。
"Microformatsの方が簡単そうやん。" でも・・・?
Microformatsの方は"現実のニーズに応じて"作られているので、仕様のフォーマットさえ決まっていれば、classでマークアップするだけなので、コーダーさんであればすぐに実践できます。
"Microfomartsだけでええやん。"って感じですが、MicrodataにはMicroformatsにはない拡張性があります。
Microdataのグローバル属性
Microdataのグローバル属性は全てで5つあります。
itemsope
アイテムが組み込まれていることを表す。
itemprop
プロパティ名を指定。
itemtype
アイテムで使われるボキャブラリーを表すURLを指定。
ただしitemscope属性が指定された要素のみで使用可。
itemref
アイテムに関係するプロパティを含んだ要素のidコンテンツ属性値を指定。
ただしitemscope属性が指定された要素のみで使用可。
itemid
該当のアイテムが表す情報を参照するURLを指定。
ただしitemscope属性とitemscope属性の両方が指定された要素のみで使用可。
マークアップ例 - スコープの拡張
Microformatsではclass="vcard"から外れた要素はスコープできません。
例えば下記のマークアップではclass="url"が <div class="vcard">
の外に出てしまっているので、コンピュータがURLのアイテムを読むことができません。
<div class="vcard">
lt;div class="fn">Tomoki Kubo</div>
lt;div class="tel">000-0000-0000</div>
iv>
dress>
<a class="url" href="https://kojika17.com">htt://kojika17.com</a>
</address>
しかしMicrodataではitemrefという便利なグローバル属性があるので、スコープ外でもアイテムに追加することができます。
<div itemtype="http://microformats.org/profile/hcard" itemscope itemref="mdURL">
<div itemprop="fn">Tomoki Kubo</div>
<div itemprop="tel">000-0000-0000</div>
lt;/div>
lt;div id="mdURL">
<a itemprop="url" href="https://kojika17.com">htt://kojika17.com</a>
</div>
手順としては
- スコープ外の要素にitempropを追加します。
- その要素か、親要素に任意でidを振ります。ここでは mdURL としています。
- itemscopのある要素に、 itemref="任意のID" を記述します。
Microdataのグローバル属性を使用することにより、Microformatよりも柔軟なセマンティックHTMLドキュメントを作成することができます。
セマンティックを意識すると、HTML文章の見え方も変わってきますし、MicroformatやMicrodata、RDF(ここでは紹介しませんでしたが)でマークアップすることにより、Googleの検索結果にレビューやパンくずを出しやすくなります。
時間があればvCard, vEvent, googleReview, googleBreadcrumbについて、記事を書こうかな。
参考サイト