microformats2 & HTML5

The Next Evolutionary Step For Web Data

HTML5

CC-BY-3.0

etherpad.mozilla.org/
microformats2

evolution of data on the web

microformats today
challenges & lessons
microformats2 & HTML5

1. microformats today

structured data 2012:
~70% microformats

Web Data Commons pie chart of domains with structured data

simplicity & openness

public domain / CC0

19 translations!

why microformats?

site features/UI -
search results
enable others to build on top
cheap DRY API - compare to XML[1]/JSON
apps/sites consuming microformats
Readability, ,
simplest solution - least code

which microformats?

hAtom - Readability (hNews), numerous customers
hCard - H2VX Operator
hCalendar - H2VX Operator
hMedia -
hProduct -
hRecipe -
hResume - , library clients
hReview -
hReview-aggregate -
rel-me - , RelMeAuth/IndieAuth
rel-author -
rel-license - advanced search

2. challenges & lessons

8 years of alternative approaches

2005-2009(?): StructuredBlogging
2005-2011: Google Base schema
2007-2011(?): Google Data API/Elements
2009-2009(?): Yahoo et al CommonTag.org
2009-2011(?): Google rdf.data-vocabulary.org
2010-present Facebook OGP meta tags
2011-present Google+MS(Y!) Schema.org
2012-present Twitter Cards meta tags
2012-present OpenMetadata.org

lessons learned

class collisions and losses

class="summary", class="description"
site design updates remove & rewrite markup
answer: prefixed class names
- h-*, p-*, u-*, dt-*, e-*
- avoids collisions: class="p-summary"
- easier to recognize: class="h-card"
- enables generic parsing and JSON

too much markup

<span class=vcard><span class=fn>Tantek Çelik</span></span>
<span class="vcard"><span class="fn n">
    <span class="given-name">Glenda</span>
    <span class="additional-name">Watson</span>
    <span class="family-name">Hyatt</span>
</span></span>

even bigger problem: microdata, RDFa (won't fit on a slide)

itemscope itemtype itemprop itemref itemid
vocab typeof property rel

microformats2: less markup

flat sets of properties. no subproperties.
common markup → common properties
- <span class="h-card">Tantek Çelik</span>
  → name
- <a class="h-card" href="http://tantek.com">Tantek Çelik</a>
  → url, name
- <a class="h-card" href="http://tantek.com"> <img src="IMG_0123.jpg" alt="Tantek Çelik"/></a>
  → url, photo, name

3. HTML5 & microformats2

a. HTML5 data tables

<table> <th id> <td headers>
Example: Unofficial XOXO Directory
One big <table> with 500+ <tr>s
One row of <th>s, the rest <td>s

HTML5 data tables: result

Google search results for XOXO directory show a table

b. HTML5 `<time>` & `<data>`

HTML5 new element: <time>

<time class="dt-start" datetime="2013-07-19 15:15:00">
  19 July 2013 at 15:16</time>

or combine with value class pattern:

<span class="dt-start">
  <time class="value">2013-07-19</time> at
  <time class="value">15:15</time>
</span>

Trade-off: DRY vs. locale-specific datetimes

HTML5: <time> recent enhancements

year: © <time>2013</time>
year-month: (email list, blog archives)
<time datetime="2013-07">July 2013</time>
month-day
Birthdate: <time datetime="--03-11">03-11</time>
duration: <time>205s</time>
album length: <time datetime="42m 59s">42:59</time>

HTML5 new element: <data>

<span class="geo">
  <data class="latitude"
        value="59.43722">59°26′14″N
  </data>
  <data class="longitude"
        value="24.74528">24°44′43″E
  </data>
</span>

c. microformats2

microformats2 summary

prefixed class names (h- p- u- dt- e-)
flat sets of properties
single class markup for common uses
live documentation:
microformats.org/wiki/microformats2

microformats2 implementations

microformats2 open source parsers:
- Javascript (browser, node.js)
- PHP
- Ruby
- Python? contributors welcome!

microformats2 as API example

microformats2 as JSON read API

microformats2: indieweb reply

microformats2: indieweb comments

microformats2: indieweb rsvp

microformats2: indieweb event

which microformats2 vocabularies?

h-adr - structured addresses
h-card - about, who, contact, authors, venues
h-entry - posts, comments (RSVPs)
h-event - events
rel-in-reply-to - link from a reply (RSVP) to original post
For more indieweb information:
- indiewebcamp.com
- @indiewebcamp
- #indiewebcamp on Freenode

microformats support coming to Firefox OS

Screenshots of FirefoxOS home screen and browser start page.

Q & A

Q & A FAQ

1. Which microformats should I use?

a classic microformat on <body> for main page subject
microformats2 for both main subject and nested data: JSON API
site-specific link previews:
- optional: OGP meta tags for Facebook
- optional: Twitter Cards meta tags for Twitter
- Beware of duplicated invisible data drift!

2. How do I validate my microformats?

microformats validators, e.g.:
- http://pin13.net/ microformats parser
Try Google Rich Snippets Testing Tool - limited support
Get Operator for Firefox, turn on debug mode

3. How do I get involved?

Read (and edit!) the wiki:
microformats.org/wiki
Code microformats into your markup
Follow @microformats on Twitter
Join IRC and give feedback: #microformats on Freenode

Thank you.

Photo by Yortw

Tantek Çelik • tantek.com • @t
tantek.com/presentations/2013/07/microformats2

CC-BY-3.0

etherpad.mozilla.org/microformats2

1. microformats today

simplicity & openness

public domain / CC0

2. challenges & lessons

lessons learned

3. HTML5 & microformats2

b. HTML5 <time> & <data>

c. microformats2

Q & A

Q & A FAQ

etherpad.mozilla.org/
microformats2

b. HTML5 `<time>` & `<data>`