What are Microformats?

Tantek Çelik Senior Technologist Technorati
What are Microformats?
- History
- Principles
- Foundation
- Examples
History: 2000+ More CSS, less HTML
- Web designers transition to CSS
- eliminated Web 1.0 <font>s and <table>s
  - replaced with CSS font-family, float etc.
- documents got smaller
- (X)HTML use and proficiency increased
History: 2002 semantic (X)HTML
- headings and paragraphs
- no more <b>ed and <br>eakfast
  old: new:
  <b>had lunch</b> <br> i had lunch today <br>
  
  <h3>had lunch</h3> <p> i had lunch today </p>
- advantages:
  - Search engine relevance from heading tags
  - easier to style more beautifully
  - See CSS Zen Garden

old:	new:
`<b>had lunch</b> <br> i had lunch today <br>`	`<h3>had lunch</h3> <p> i had lunch today </p>`

History: 2002 better anchors & links

discoverable permalinks

no more <a>norexic </a>nchors

old:	new:
`<a name="post123"></a> ... <a href="#post123">#</a>`	`<div id="post123"> ... <a href="#post123" rel="bookmark">#</a> </div>`

'rel' attribute rediscovered

History: 2003 XHTML extensions
- XFN (XHTML Friends Network) link rels conceived, published
- Authoring, Editing, Browsing Tools
  - implemented in days/weeks
- XMDP (XHTML Meta Data Profiles) introduced
  - Formally reference, document XHTML extensions
History: 2004 patterns emerge
- ETech conference: "real world semantics"
  - "lowercase semantic web" introduced as contrast
  - "microformats" term coined
  - license, VoteLinks "rel" extensions
  - XOXO (eXtensible Open XHTML Outlines) proposed
- XFN poster paper at ACM Hypertext 2004
- FOO Camp simple semantics sessions
  - reuse vCard/iCalendar RFCs 1:1 in XHTML
- Microformats principles documented
History: 2005 implementations plus
- rel="tag" for distributed folksonomies
- rel="nofollow" from Google to fight link spam
- hCard, hCalendar iterated, implemented
- SXSW "Elements of Meaningful XHTML"
  - inspired numerous grassroots microformats since
- hReview conceived, collaboratively written, published
- XMDP poster paper (#915) at WWW2005
Microformats Principles
- solve a specific problem
- simple as possible
  - evolutionary improvements
- humans first, machines second
  - presentable and parsable
  - adapt to current behaviors
- reuse from widely adopted standards
  - semantic (X)HTML, schemas from interoperable RFCs
- modularity / embeddability
- decentralized development, content, services
  - explicitly encourage "spirit of the Web"
Foundation: XMDP
- XHTML Meta Data Profiles
- use XHTML to extend itself!
- dictionary of properties
- description and/or dictionary of values
- defines class values, meta properties/values, and new rel/rev
- reference with <head profile="{profileURI}">

Foundation: HTML4 XMDP example


 <dl class="profile">
  <dt id='author'>author</dt>
   <dd>A person who wrote the document.</dd>
  <dt id='keywords'>keywords</dt>
   <dd>List of keywords/keyphrases of the document.</dd>
  <dt id='copyright'>copyright</dt>
   <dd>Copyright holder(s), statement of copyright.</dd>
  <dt id='date'>date</dt>
   <dd>Last updated date of the document, in ISO8601.</dd>
  <dt id='identifier'>identifier</dt>
   <dd>The normative URI for the document.</dd>
  <dt id='rel'>rel</dt>
   <dd><dl>
    <dt id='script'>script</dt>
    <dd>A reference to a client-side script. With the LINK
     element, the script is evaluated as the document loads and 
     may modify the contents of the document dynamically.</dd> 
   </dl></dd>   
 </dl>

People & Events
- Very common "structures" on weblogs
- Create explicit structures
  - in order to easily publish, index, aggregate
- Minimize impact on authors (and developers)
- Avoid duplicating all content
  - Avoid requiring file uploads
vCard & iCalendar
- RFC 2426 & RFC2445
- Widely adopted and implemented
  - Not SGML/XML markup
- XML/RDF variants exist
  - Can't be easily embedded/styled in (X)HTML
  - Places many constraints on authors
    - E.g. which elements and how to nest
- Conclusion: Try 1:1 mapping into XHTML
hCard & hCalendar
- hCard = vCard RFC2426 mapped 1:1 into XHTML
- hCalendar = iCalendar RFC2445 mapped 1:1 into XHTML
- Reuse schema (names, properties etc.) as class values
- Use most precise XHTML building blocks
- If necessary use <abbr> for human vs. machine values
hCard examples
- hCard creator
- This presentation (view source)
- X2V converter
  - See examples in the wild at hCard spec
hCalendar examples
- hCalendar creator
- This presentation
- Sunnyvale House Concerts site
- X2V converter
- EVDB and Upcoming.org
- Tantek's blog
- subscribe to the events on a blog
Colophon

What are Microformats?

Supernova2005 • June 20, 2005

What are Microformats?

What are Microformats?

History: 2000+ More CSS, less HTML

History: 2002 semantic (X)HTML

History: 2002 better anchors & links

History: 2003 XHTML extensions

History: 2004 patterns emerge

History: 2005 implementations plus

Microformats Principles

Foundation: XMDP

Foundation: HTML4 XMDP example

People & Events

vCard & iCalendar

hCard & hCalendar

hCard examples

hCalendar examples

Colophon