MicroformatsとMicrodataの違いについて

そもそもMicroformats、Microdataとは？

マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。
例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。
ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。

Microformats、Microdataの仕様

MicroformatsとMicrodataは、扱えるフォーマット同じですが仕様が違います。

Microformats

HTMLに現実のニーズに応じた意味拡張を施すことを目的としてる。
HTMLのバージョンを気にせずに使える。

Microdata

HTML5に新たに追加された仕様。
HTMLのバージョンは(X)HTML5のみ使用可。

マークアップ例

例として、連絡先を記述するhCardでマークアップします。

<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="http://kojika17.com">htt://kojika17.com</a>
</div>

<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="http://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">
     <div class="fn">Tomoki Kubo</div>
     <div class="tel">000-0000-0000</div>
</div>

<address>
	     <a class="url" href="http://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>
</div>

<div id="mdURL">
	<a itemprop="url" href="http://kojika17.com">htt://kojika17.com</a>
</div>

手順としては

1. スコープ外の要素にitempropを追加します。
2. その要素か、親要素に任意でidを振ります。ここではmdURLとしています。
3. itemscopのある要素に、itemref="任意のID"を記述します。

Microdataのグローバル属性を使用することにより、Microformatよりも柔軟なセマンティックHTMLドキュメントを作成することができます。