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>

手順としては

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

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

セマンティックを意識すると、HTML文章の見え方も変わってきますし、MicroformatやMicrodata、RDF(ここでは紹介しませんでしたが)でマークアップすることにより、Googleの検索結果にレビューやパンくずを出しやすくなります。

時間があればvCard, vEvent, googleReview, googleBreadcrumbについて、記事を書こうかな。

参考サイト