Microformats & Microdata

for 第３回 Webkit/HTML5 勉強会

by Oli Studholme (@boblet)

Introductions

  • I’m a freelance web designer
  • I’m a Web Directions East organiser east.webdirections.org
  • I’m interested in HTML5 & CSS3 oli.jp
  • I may writing a book on HTML5 & CSS3 (内緒内緒 ;-)

A brief history of everything…

In the beginning TBL invented the web…

A brief history of everything…

Documents were shared and linked, and TBL saw that it was good. But presentational HTML began to sully the interwebs of Eden.

The righteous fought against the evil of tag soup; Web Standards Project, POSH/web trifle, Microformats, HTML5… (presentational → semantic).

TBL foretells the glorious future of the web—a “web of data”; XML, RDFa, XHTML2 (woops)…

Microformats

So what is this whole Microformats thing?

Microformats

—basic ideas

  • Semantically extending HTML via agreed class & rel syntax, and nesting
  • Based on existing data formats like vcard (RFC2426) and ical
  • Built for humans first (readable, simple) & machines second

Microformats.org wiki (マイクロフォーマットウィキ（日本語）)

Current Microformats

  • hCard (人や会社、組織や場所情報)
  • hCalendar (カレンダー・イベント情報)
  • VoteLinks (投票のリンク)
  • hReview (商品、サービス、ビジネス、イベントなどのリビュー)
  • rel-license (コンテンツのライセンス情報)
  • rel-tag (キーワードやテーマのタグ)
  • rel-nofollow (リンクにランキングの指標として用いないように)
  • XOXO (outlines) (アウトラインフォーマット)
  • XFN (relationships) (人間関係を表現する)
  • XMDP (metadata profiles) (メタデータのプロフィール)

Draft Microformats

adr, geo, hAtom, hAudio, hListing, hMedia, hNews, hProduct, hRecipe, hResume, hReview, rel-directory, rel-enclosure, rel-home, rel-payment, robots exclusion, xFolk…

Microformat Patterns

abbr-design-pattern, class-design-pattern, date-design-pattern, datetime-design-pattern, include-pattern, value-class-pattern, rel-design-pattern

Microformats consumers

Microformats producers

Microformats tools

Microformats & HTML5

—Microformats spec doesn’t cover new HTML5 elements

(yet)

http://microformats.org/wiki/html5

Microformats & HTML5—HTML Tidy

HTML Tidy is used by some Microformats tools (eg H2VX), and doesn’t support HTML5 (strips unknown elements)

→ html5lib is coming http://code.google.com/p/html5lib/

Contact information: vcard (RFC2426)

Standard format for exchanging information eg Mac OS X Address Book, mobile phones etc

AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERN\n
ET:jfriday@host.com\nEND:VCARD\n

Contact information microformat: hCard

  • class="vcard" (ルート要素に指定するクラス)
    • class="fn" (氏名)
    • class="n" (名前)
      • class="honorific-prefix" (敬称・接頭辞)
      • class="given-name" (名)
      • class="additional-name" (ミドルネーム)
      • class="family-name" (姓)
      • class="honorific-suffix" (敬称・接尾辞)
    • class="nickname" (ニックネーム・あだ名)

Contact information microformat: hCard

    • …
    • class="title" (役職)
    • class="org" (組織)
    • class="url" (人・会社のURL)
    • class="email" (eメールアドレス)
      • class="type" (種類)
      • class="value" (値:下記から選択)

There’s more, but that will do to start. Refer to the Microformats cheatsheet (PDF) (日本語版のマイクロフォーマットチートしート)

Contact information to mark up

Let’s make my contact information into an hCard. Then we can use uF tools to access the data, eg convert it to vcard for download

スタッドホルム・オリ
http://oli.jp/
@boblet

hCard—convert to HTML

<p><b>スタッドホルム・オリ</b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

hCard—convert to HTML

<p><b>スタッドホルム・オリ</b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

Woops, I added a microformat by mistake! rel="me" on a link is XFN

→ Microformats are basically POSH—standardised good coding

hCard—required classes; vcard & fn

<p class="vcard"><b class="fn">スタッドホルム・オリ</b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

hCard—names & ‘implied n optimisation’

If there’s only fn (no n or org) on an element, and the name is:

  1. two words (with a space between), then n = given-name family-name
  2. two words with comma between, then n = family-name, given-name
  3. two words, the second one being only one letter with an optional period, then n = family-name given-name(first initial)
  4. only one word, then n = nickname

hCard—names & ‘implied n optimisation’

But Japanese has no whitespace, so we need n plus family-name and given-name.

hCard—n, family-name, given-name, nickname

<p class="vcard"><b class="fn n"><span class="family-name">スタッドホルム</span>・<span class="given-name">オリ</span></b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@<b class="nickname">boblet</b></a>
</p>

hCard—url

<p class="vcard"><b class="fn n"><span class="family-name">スタッドホルム</span>・<span class="given-name">オリ</span></b><br>
<a class="url" rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a class="url" rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@<b class="nickname">boblet</b></a></p>

Using Operator as a Microformat validator

Install the Operator Firefox extension

Operator Toolbar
Operator toolbar

Using Operator as a Microformat validator

Operator Options
Make sure “Debug Mode” is selected

Using Operator as a Microformat validator

Operator Debug
hCard actions menu

Using Operator as a Microformat validator

Operator Debug
Debug dialog

hCard structure (via Operator)

fn=スタッドホルム・オリ
object n {
	object given-name {
		0=オリ
	}
	object family-name {
		0=スタッドホルム
	}
}
object nickname {
	0=boblet
}
object url {
	0=http://oli.jp/
	1=http://twitter.com/boblet
}

Convert hCard to vcard (via Operator)

BEGIN:VCARD
PRODID:-//suda.co.uk//X2V 0.12 (BETA)//EN
SOURCE:http://oli-studio.com/temp/uf/hcard.html
NAME:
VERSION:3.0
N;CHARSET=utf-8:スタッドホルム;オリ;;;
FN;CHARSET=utf-8:スタッドホルム・オリ
URL:http://oli.jp/
URL:http://twitter.com/boblet
NICKNAME;CHARSET=utf-8:bobletスタッドホルム・オリ
END:VCARD

Wahey!

The Interwebs
I’m in ur HTML, datafying it

What about events? hCalendar

  • class="vevent" (ルート要素に指定するクラス)
    • class="category" rel="tag" (カテゴリー)
    • class="class" (イベント情報の公開レベル)
    • class="description" (詳細説明)
    • class="dtend" (ISO Date) (終了日時)
    • class="dtstamp" (ISO Date) (パンフレット等作成日)
    • class="dtstart" (ISO Date) (開始日時)
    • class="duration" (期間)
    • …

What about events? hCalendar

    • …
    • class="location" (場所)
    • class="status" (イベントの状況)
    • class="summary" (イベント名)
    • class="uid" (たいていはURL)
    • class="url" (url) (イベントURL)
    • class="last-modified" (最終更新日時)

Event text to mark up

第3回 Webkit/HTML5勉強会
2010年2月17日、19時から21時まで
グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）
今回は、W3CのMike(tm) SmithさんにHTML5のバリデーションサービスvalidator.nuの裏話を、Oli StudholmeさんにMicrodata/Microformatsのお話をしていただきます。

hCalendar—convert to HTML

<section>
<h2><a href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND">第3回 Webkit/HTML5勉強会</a></h2>
<ul>
<li><time datetime="2010-02-17T19:00:00+09:00">2010年2月17日、19時</time>から<time datetime="2010-02-17T21:00:00+09:00">21時</time>まで</li>
<li><a href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p>今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</section>

hCalendar & HTML5—<time>

As mentioned earlier, no support for <time datetime=""> … yet. Also some tools don’t support uF classes on any new HTML5 elements (eg H2VX)
http://microformats.org/wiki/html5

→ use <abbr> design pattern
→ wrap in <time> if desired (but don’t add class="dtstart" etc to <time>)
http://microformats.org/wiki/abbr-design-pattern

The abbr design pattern & accessibility

Putting full datetimes into abbr is bad for accessibility (<abbr class="dtstart" title="2010-02-17T19:00:00+09:00">)
http://microformats.org/wiki/accessibility-issues

→ use the value class pattern with <abbr> to break into date and time. However we need ISO Date-style content:

<code><span class="dtstart"><abbr class="value">2010-02-17</abbr>、<abbr class="value">19:00</abbr></span>時から</code>

http://microformats.org/wiki/value-class-pattern

The abbr design pattern & accessibility

→ even better, use class="value-title" style (however tool support is patchy—currently only Operator):

<code><span class="dtstart"><abbr class="value-title" title="2010-02-17">2010年2月17日</abbr>、<abbr class="value-title" title="19:00:00+0900">19時</abbr></span>から</code>

Using value-title to publish machine data

hCalendar & HTML5—colon-less timezones

The value class pattern page recommends using colon-less timezones (+0900, not +09:00), but these are not compliant HTML5
http://microformats.org/wiki/value-class-pattern

→ if using a time wrapper use eg +09:00 for <time>’s datetime value

hCalendar & timezones

H2VX doesn’t support timezones
http://microformats.org/wiki/h2vx#issues

→ if using H2VX don’t add a timezone (=floating time) eg <abbr title="19:00:00+09:00">

Tool support

OperatorOptimusH2VX
Timezonesyesyesno
Value class patternyesnoyes
class="value-title"yesnono
implied dtendyesnono
HTML5 <time>nonono
classes on HTML5 elementsyesyesno
<time> wrapper?okokok

What to do?

Decide on your goal first:

  • Want users to be able to download vcard/ical event?
    → support H2VX
  • Want users to be able to discover Microdata?
    → support Operator
  • Just want to add semantic information?
    → Follow the spec & hope tools catch up soon

Discoverability

Microformats Icons
Add a Microformats icon to indicate data is there

hCalendar—required classes: vevent, summary, dtstart

<div class="vevent">
<h2><a class="summary" href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND">第3回 Webkit/HTML5勉強会</a></h2>
<ul>
<li><span class="dtstart"><abbr class="value-title" title="2010-02-17">2010年2月17日</abbr>、<abbr class="value-title" title="19:00:00+0900">19時</abbr></span>から21時まで</li>
<li><a href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p>今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</div>

hCalendar—url, dtend, location, description

<div class="vevent">
<h2><a class="summary url" href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND">第3回 Webkit/HTML5勉強会</a></h2>
<ul>
<li><abbr class="dtstart" title="2010-02-17T19:00:00+0900">2010年2月17日、19時</abbr>から<abbr class="dtend" title="2010-02-17T21:00:00+0900">21時</abbr>まで</li>
<li><a class="location" href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p class="description">今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</div>

hCalendar—output

BEGIN:VCALENDAR
PRODID:-//suda.co.uk//X2V 0.9.7 (BETA)//EN
X-ORIGINAL-URL:http://oli-studio.com/temp/uf/hcalendar.html
X-WR-CALNAME;CHARSET=utf-8:
VERSION:2.0
METHOD:PUBLISH
BEGIN:VEVENT
DESCRIPTION;CHARSET=utf-8:今回は、W3CのMike™ SmithさんにHTML5のバリデーションサービスvalidator.nuの裏話を、Oli StudholmeさんにMicrodata/Microformatsのお話をしていただきます。
LOCATION;CHARSET=utf-8:グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）
SUMMARY;CHARSET=utf-8:第3回 Webkit/HTML5勉強会
URL:http://atnd.org/events/3058
DTSTART;VALUE=DATE-TIME:20100217T190000
DTEND;VALUE=DATE-TIME:20100217T210000
END:VEVENT
END:VCALENDAR

Making an hCard for a company or organisation

If fn and org are specified together (and there’s no n), then the hCard represents a company:

<span class="fn org">Company name<span>
  • class="org" (組織)
    • class="organization-name" (組織名)
    • class="organization-unit" (組織名)

Addresses in hCard

  • class="adr" (地図上の住所)
    • class="type" (住所のタイプ) [work|home|pref|postal|dom|intl] [仕事場|自宅|優先|郵便受取|国内|国外]
    • class="post-office-box" (私書箱)
    • class="extended-address" (建物、ビル、アパート、号)
    • class="street-address" (通り、丁・番地)
    • class="region" (市区町村)
    • class="locality" (都道府県)
    • class="postal-code" (郵便番号)
    • class="country-name" (国名)

Going Microformat crazy! Adding hCards…

<div class="vevent">
<h2><a class="summary url" href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND">第3回 Webkit/HTML5勉強会</a></h2>
<ul>
<li><abbr class="dtstart" title="2010-02-17T19:00:00+0900">2010年2月17日、19時</abbr>から<abbr class="dtend" title="2010-02-17T21:00:00+0900">21時</abbr>まで</li>
<li class="vcard"><a class="location url adr" href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図"><b class="fn org">グリー株式会社</b>（<span class="region">東京都</span><span class="locality">港区</span><span class="street-address">六本木4-1-4</span> <span class="extended-address">黒崎ビル5F</span>）</a></li>
</ul>
<p class="description">今回は、<span class="vcard"><a class="url" href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith"><abbr class="org" title="World Wide Web Consortium">W3C</abbr>の<b class="fn"><span class="given-name">Mike</span>™ <span class="family-name">Smith</span></b>さん</a></span>にHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<span class="vcard"><a class="url" href="http://oli.jp/" title="Oli.jp"><b class="fn">Oli Studholme</b>さん</a></span>にMicrodata/Microformatsのお話をしていただきます。</p>
</div>

Implied n optimisation again

Remember I mentioned implied n optimisation? We can’t use it for Mike (because of the ™), but can for Oli.

<span class="vcard"><a class="url" href="http://people.w3.org/mike/" title="W3C—Michael™ Smith"><abbr class="org" title="World Wide Web Consortium">W3C</abbr>の<b class="fn"><span class="given-name">Mike</span>™ <span class="family-name">Smith</span></b>さん</a></span>

<span class="vcard"><a class="url" href="http://oli.jp/" title="Oli.jp"><b class="fn">Oli Studholme</b>さん</a></span>

Example business unit hCard

<p class="vcard">
<a class="fn org url" href="http://www.keio.ac.jp/ja/access/sfc.html" title="湘南藤沢キャンパス案内：[慶應義塾]"><span class="organization-name">慶應義塾大学</span><span class="organization-unit">湘南藤沢キャンパス</span></a><br>
<span class="adr">〒<span class="postal-code">252-8520</span>　<span class="region">神奈川県</span><span class="locality">藤沢市</span><span class="street-address">遠藤5322</span></span>
</p>

Business unit hCard as vcard

BEGIN:VCARD
PRODID:-//suda.co.uk//X2V 0.12 (BETA)//EN
SOURCE:file:///Users/oli/Dropbox/TheBook/microdata preso/example/hcard.html
NAME:
VERSION:3.0
N;CHARSET=utf-8:;;;;
ORG;CHARSET=utf-8:慶應義塾大学;湘南藤沢キャンパス
FN;CHARSET=utf-8:慶應義塾大学湘南藤沢キャンパス
URL:http://www.keio.ac.jp/ja/access/sfc.html
ADR;CHARSET=utf-8:;;遠藤5322;藤沢市;神奈川県;252-8520;
END:VCARD

Current atnd.org code—wahey!

<div id="events_show" class="vevent">
<div id="main_title">
<h1 class="summary">第3回 Webkit/HTML5勉強会</h1><a class="url" href="http://atnd.org/events/3058"></a>
<p></p>
</div>
<div class="info_layout">
	<dl class="heightLineParent">
		<dt>日時 / <span>DATE</span> :</dt>
		<dd><abbr class="dtstart" title="20100217T190000">2010/02/17 19:00</abbr></dd>
	</dl>
	<dl class="heightLineParent">
		<dt>定員 / <span>LIMIT</span> :</dt>
		<dd>40 人</dd>
	</dl>
	<dl class="heightLineParent">
		<dt>会場 / <span>PLACE</span> :</dt>
		<dd class="location">グリー株式会社 <span>（東京都港区六本木4-1-4 黒崎ビル5F）</span></dd>
	</dl>
	<dl class="heightLineParent">
		<dt>URL / <span>URL</span> :</dt>
		<dd>-</dd>
	</dl>
	<dl class="heightLineParent">		
		<dt>管理者 / <span>ADMIN</span> :</dt>
		<dd><img alt="Wwwgooglecom" height="18" src="/images/icon/wwwgooglecom.gif?1225885320" width="18" /> <a href="/users/6185">shumpei.shiraishi</a></dd>
	</dl>
</div>
<div id="event_map">
	<a href="http://www.google.co.jp/maps?q=0.0,0.0(%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%AF%E5%8C%BA%E5%85%AD%E6%9C%AC%E6%9C%A84-1-4+%E9%BB%92%E5%B4%8E%E3%83%93%E3%83%AB5F)&z=17" target="_blank">
		<img src="http://maps.google.com/staticmap?zoom=15&center=0.0,0.0&size=185x185&markers=0.0,0.0,red,a&key=ABQIAAAAsdYaDoA2IDjuVTlLOzTScBRGCa7QmUjt1D9UyM6xzEQHcgD7HxTRa42xBppJGEHYyEQ-9YCmPEza1A" />
	</a>
</div>
<div class="description">
	 <br/>今回は、W3CのMike(tm) SmithさんにHTML5のバリデーションサービスvalidator.nuの裏話を、Oli StudholmeさんにMicrodata/Microformatsのお話をしていただきます。
</div>
</div>

atnd.org output

BEGIN:VCALENDAR
PRODID:-//suda.co.uk//X2V 0.9.7 (BETA)//EN
X-ORIGINAL-URL:http://atnd.org/events/3058
X-WR-CALNAME;CHARSET=utf-8:
VERSION:2.0
METHOD:PUBLISH
BEGIN:VEVENT
DESCRIPTION;CHARSET=utf-8:今回は、W3CのMike(tm) SmithさんにHTML5のバリデーションサービスvalidator.nuの裏話を、Oli StudholmeさんにMicrodata/Microformatsのお話をしていただきます。
LOCATION;CHARSET=utf-8:グリー株式会社 （東京都港区六本木4-1-4 黒崎ビル5F）
SUMMARY;CHARSET=utf-8:第3回 Webkit/HTML5勉強会
URL:http://atnd.org/events/3058
DTSTART;VALUE=DATE-TIME:20100217T190000
END:VEVENT
END:VCALENDAR

Applause! (パチパチ)

So where does that get us?

  • convert easily to usable data for eg iCal and Address Book
  • expose data to search engines (Yahoo SearchMonkey, Google Rich Snippets…)
  • as with all good coding they increase the time required. However if you’re going to add classes for CSS anyway…

→ Microformats are a lightweight HTML-based API that even a designer can add ;-)

Microformats; pros

  • builds on your current POSH knowledge
  • can be hand authored (well, with a cheatsheet and validator)
  • good tools for creating & consuming
  • (although not browser-native … yet)
  • represent semantic data that HTML doesn’t natively
  • a lot of uptake

Microformats; cons

  • limited scope (not open ended)
  • a stop-gap measure
  • doesn’t currently support HTML5
  • (although there’s ongoing work on both specs & tools, so I expect it will)

Microdata

Microdata came from Hixie investigating what problems RDFa solves, but seeing these problems:

  • complexity
  • namespaces (no longer in HTML5)
  • some use cases seem contrived

Microdata compared to Microformats

  • can be used for any data (no need for a spec)
  • are a separate layer on the page (not tightly coupled with HTML)
  • have a little more rigor than Microformats
  • are still easy enough to hand author
  • are very new (few tools, consuming apps, examples etc)

Microdata tools

Unfortunately there are basically only a couple that work with the current spec

Microdata overview—items & properties

Groups (called items; attribute itemscope) of name-value pairs (called properties; attribute itemprop="" plus element content value) are made with standard HTML elements

<p itemscope>I went to hear <span itemprop="band">Salter Cane</span> last night. They were great!</p>

Microdata overview—value = element content…

This is the URL property (for a, area, audio, embed, iframe, img, link, object, source, and video elements), the datetime property for 

<p itemscope>I went to hear <a itemprop="url" href="http://www.saltercane.com/">Salter Cane</a> <time itemprop="date" datetime="2010-02-18">last night</time>. They were great!</p>

Microdata overview—value = element content…

Note url = “http://www.saltercane.com/” (not “Salter Cane”). You can’t add non-URL itemprops to <a> etc:

<p itemscope>I went to hear <a itemprop="url" href="http://www.saltercane.com/"><span itemprop="band">Salter Cane</span></a> <time itemprop="date" datetime="2010-02-18">last night</time>. They were great!</p>

Microdata overview—when no content use meta

To add different content use <meta itemprop="" content=""> inside the item as appropriate. Unfortunately in current browsers that doesn’t work (<meta> is moved to <head>).

→ ugly hack :-|

<span itemprop="" style="display:none;">content</span>

Microdata overview—nesting

Properties can be nested—just add itemscope to an element with itemprop

<p itemscope>The <span itemprop="band">Salter Cane</span> drummer is <span itemprop="members" itemscope><span itemprop="name">Jamie Freeman</span>.</span></p>

Microdata overview—multiple properties

Items can have multiple properties with the same name and different values

<span itemprop="members" itemscope><span itemprop="name">Chris Askew</span>, <span itemprop="name">Jessica Spengler</span>, <span itemprop="name">Jamie Freeman</span>, and <span itemprop="name">Jeremy Keith</span>.</span>

Microdata overview—multiple properties

One element can have multiple properties (multiple itemprop="" values)

<p itemscope><span itemprop="guitar vocals">Chris Askew</span> was in great form.</span></p>

Microdata overview—in-page references

Items can pull in non-descendant properties with the attribute itemref="id1 (id2 …)" (a list of ids to check)

<p itemscope itemref="band-members">I went to hear <a itemprop="url" href="http://www.saltercane.com/"><span itemprop="band">Salter Cane</span></a> <time itemprop="date" datetime="2010-02-18">last night</time>. They were great!</p>
…
<p id="band-members"><span itemprop="band">Salter Cane</span> is <span itemprop="members" itemscope><span itemprop="name">Chris Askew</span>, <span itemprop="name">Jessica Spengler</span>, <span itemprop="name">Jamie Freeman</span>, and <span itemprop="name">Jeremy Keith</span>.</span></p>

Microdata overview—typed items & global id

Items can be typed via URLs (attribute itemtype="URL" on same element as itemscope)

<p itemscope itemtype="http://example.org/music#band">I went to hear <span itemprop="name">Salter Cane</span> last night. They were great!</p>

They can also be identified via a global identifier (attribute itemid="URL" on same element as itemscope, with URL defined by itemtype)

vcard in Microdata

Let’s return to my contact info and convert it to Microdata

<p><b>スタッドホルム・オリ</b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

The spec actually has detailed descriptions of vcard and vevent as Microdata.

vcard in Microdata

—required; itemscope, itemtype, itemprop="fn"

<p itemscope itemtype="http://microformats.org/profile/hcard"><b itemprop="fn">スタッドホルム・オリ</b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

vcard in Microdata

—fn & nickname

<p itemscope itemtype="http://microformats.org/profile/hcard"><b itemprop="fn n" itemscope><span itemprop="family-name">スタッドホルム</span>・<span itemprop="given-name">オリ</span></b><br>
<a rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a itemprop="nickname" rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@boblet</a>
</p>

vcard in Microdata—url

<p itemscope itemtype="http://microformats.org/profile/hcard"><b itemprop="fn n" itemscope><span itemprop="family-name">スタッドホルム</span>・<span itemprop="given-name">オリ</span></b><br>
<a itemprop="url" rel="me" href="http://oli.jp/" title="オリのブログ（HTML5など）">http://oli.jp/</a><br>
<a itemprop="url" rel="me" href="http://twitter.com/boblet" title="Twitterにフォローしてね！">@<b itemprop="nickname">boblet</b></a>
</p>

Note once we add itemprop="url" the itemprop="nickname" must be moved to a separate element.

Microdata output—vcard

We can use Live Microdata as a validator

BEGIN:VCARD
PROFILE:VCARD
VERSION:3.0
SOURCE:http://foolip.org/microdatajs/live/
NAME:Live Microdata
FN:
N:スタッドホルム;オリ;;;
URL;VALUE=URI:http://oli.jp/
URL;VALUE=URI:http://twitter.com/boblet
NICKNAME:boblet
END:VCARD

What about an event? vevent in Microdata

<section>
<h2><a href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND">第3回 Webkit/HTML5勉強会</a></h2>
<ul>
<li><time datetime="2010-02-17T19:00:00+09:00">2010年2月17日、19時</time>から<time datetime="2010-02-17T21:00:00+09:00">21時</time>まで</li>
<li><a href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p>今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</section>

vevent essentials—

itemscope, itemtype, summary, dtstart

<section itemscope itemtype="http://microformats.org/profile/hcalendar#vevent">
<h2><a href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND"><b itemprop="summary">第3回 Webkit/HTML5勉強会</b></a></h2>
<ul>
<li><time datetime="2010-02-17T19:00:00+09:00" itemprop="dtstart">2010年2月17日、19時</time>から<time datetime="2010-02-17T21:00:00+09:00">21時</time>まで</li>
<li><a href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p>今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</section>

vevent—

dtend, location, description

<section itemscope itemtype="http://microformats.org/profile/hcalendar#vevent">
<h2><a itemprop="url" href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND"><b itemprop="summary">第3回 Webkit/HTML5勉強会</b></a></h2>
<ul>
<li><time itemprop="dtstart" datetime="2010-02-17T19:00:00+09:00">2010年2月17日、19時</time>から<time itemprop="dtend" datetime="2010-02-17T21:00:00+09:00">21時</time>まで</li>
<li itemprop="location"><a href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図">グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）</a></li>
</ul>
<p itemprop="description">今回は、W3Cの<a href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">Mike™ Smith</a>さんにHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<a href="http://oli.jp/" title="Wrting &amp; such by Oli Studholme (@boblet)">Oli Studholme</a>さんにMicrodata/Microformatsのお話をしていただきます。</p>
</section>

vevent—adding vcards (!)

<section itemscope itemtype="http://microformats.org/profile/hcalendar#vevent">
<h2><a itemprop="url" href="http://atnd.org/events/3058" title="第3回 Webkit/HTML5勉強会 : ATND"><b itemprop="summary">第3回 Webkit/HTML5勉強会</b></a></h2>
<ul>
<li><time itemprop="dtstart" datetime="2010-02-17T19:00:00+09:00">2010年2月17日、19時</time>から<time itemprop="dtend" datetime="2010-02-17T21:00:00+09:00">21時</time>まで</li>
<li itemprop="location"><span itemscope itemtype="http://microformats.org/profile/hcard"><a itemprop="url" href="http://gree.co.jp/corporate/location/" title="グリー株式会社 | 会社情報 | 会社案内図"><b itemprop="fn org">グリー株式会社</b>（<span itemprop="adr" itemscope><span itemprop="region">東京都</span><span itemprop="locality">港区</span><span itemprop="street-address">六本木4-1-4</span> <span itemprop="extended-address">黒崎ビル5F</span></span>）</a></span></li>
</ul>
<p itemprop="description">今回は、<span itemscope itemtype="http://microformats.org/profile/hcard"><a itemprop="url" href="http://people.w3.org/mike/" title="W3C &#187; People &#187; Michael(tm) Smith">W3Cの<b itemprop="fn n nickname"><span itemprop="given-name">Mike</span>™ <span itemprop="family-name">Smith</span></b>さん</a></span>にHTML5のバリデーションサービス<a href="http://validator.nu/" title="Validator.nu">validator.nu</a>の裏話を、<span itemscope itemtype="http://microformats.org/profile/hcard"><a itemprop="url" href="http://oli.jp/" title="Oli.jp"><b itemprop="fn">Oli Studholme</b>さん</a></span>にMicrodata/Microformatsのお話をしていただきます。</p>
</section>

Combining microdata items

Note that these are different

<li itemprop="location"><span itemscope itemtype="http://microformats.org/profile/hcard">

<li itemprop="location" itemscope itemtype="http://microformats.org/profile/hcard">

Combining microdata items

The first is two separate items of Microdata, the second is one instance of microdata, containing a nested item (and in this case invalid, because itemtype="http://microformats.org/profile/hcalendar#vevent" doesn’t contain eg nickname)

Event microdata output—vevent

BEGIN:VCALENDAR
PRODID:jQuery Microdata
VERSION:2.0
BEGIN:VEVENT
DTSTAMP;VALUE=DATE-TIME:2010215T232323Z
URL:http://atnd.org/events/3058
SUMMARY:第3回 Webkit/HTML5勉強会
DTSTART;VALUE=DATE-TIME:20100217T190000+0900
DTEND;VALUE=DATE-TIME:20100217T210000+0900
LOCATION:グリー株式会社（東京都港区六本木4-1-4 黒崎ビル5F）
END:VEVENT
END:VCALENDAR

…and the contact information—vcard

BEGIN:VCARD
PROFILE:VCARD
VERSION:3.0
SOURCE:http://foolip.org/microdatajs/live/#ical
NAME:Live Microdata
URL;VALUE=URI:http://gree.co.jp/corporate/location/
FN:グリー株式会社
ORG:グリー株式会社
ADR:;黒崎ビル5F;六本木4-1-4;港区;東京都;;
N:;;;;
END:VCARD

…

Mike’s vcard

BEGIN:VCARD
PROFILE:VCARD
VERSION:3.0
SOURCE:http://foolip.org/microdatajs/live/#ical
NAME:Live Microdata
URL;VALUE=URI:http://people.w3.org/mike/
FN:Mike™ Smith
N:Mike™ Smith
NICKNAME:Mike™ Smith
GIVEN-NAME:Mike
FAMILY-NAME:Smith
N:Smith;Mike™;;;
END:VCARD

Microdata pros

  • pretty easy to understand (even for a designer! ;-)
  • can be used for any data (no requirement to use itemtype)
  • more rigor than Microformats
  • avoids some of the problems of RDFa (CURIEs, complexity, fragility…)
  • a separate layer that isn’t tied to the HTML content

Microdata cons

  • brand new
  • almost no tools
  • almost no usage
  • it’s not RDFa (!!!)

Conclusion

  • Microformats are stop-gap
  • Microdata is very new (almost no tools)
  • RDFa is difficult but entrenched

Choose your tradeoff…

Thank you