1) Microformats are conventions for embedding semantics in HTML to enable decentralized development of metadata. They use class names to label commonly used data types like people, events, reviews. 2) Microformats are designed for humans and machines, intended to allow information to be automatically processed by software. They emerged from an open community process. 3) Popular microformats include hCard for contact information and hCalendar for events. Rel-license adds metadata about content licenses. Tools like Firefox extensions can detect and surface microformatted data.

1. Introduction to Microformats
The New York Web Standards Meetup Group
22 May 2008
Jeffrey Barke . Senior Developer / Information Architect

2. About microformats

3. What are microformats?
• Designed for humans first and machines second, microformats are a set
of simple, open data formats built upon existing and widely adopted
standards. –Dan Cedarholm with Tantek Çelik for launch of
microformats.org
• Microformats are simple conventions for embedding semantics in HTML
to enable decentralized development. –from the mailing list
• Microformats are carefully designed (X)HTML class names that extend
the semantics of (X)HTML and enable authors to publish higher
semantic fidelity content such as people, events, reviews, etc. –Tantek
Çelik
• Microformats are a way of identifying and labeling classes of commonly
used data that make it easier for humans or computers to locate or
distribute such information on websites. --Dave Sanford
Source: http://microformats.org/wiki/what-are-microformats
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

4. What are microformats? (cont’d)
• A microformat (sometimes abbreviated μF or uF) is a web-based data
formatting approach that seeks to re-use existing content as metadata,
using only XHTML and HTML classes and other attributes. This
approach is intended to allow information intended for end-users (such
as contact information, geographic coordinates, calendar events, and
the like) to also be automatically processed by software.
Source: http://en.wikipedia.org/wiki/Microformats
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

5. Why use microformats?
• Aggregation sites
– The general model is the user travels to a particular site, and then
proceeds to enter data (classified add, review, list of friends) for a
particular purpose. Your information is scattered all over the Web,
and you have to pick which sites you want to use.
– The combination of blogging and microformats is now reversing this
model. Now, your information remains in your blog, and the Web
sites come to you. For instance, if you want to sell something, you
can blog about it using an hListing, and a site like edgeio will find
it when it aggregates classified advertisements across the Web.
Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-
introduction/
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

6. Why use microformats? (cont’d)
• Sharing information with a specific community
– Let’s say you enjoy mountain biking, and would like to share various
trails with other people who also enjoy mountain biking. If you
posted this information to your blog, you could geocast (RSS with a
payload of geo), the locations of the mountain bike trails, and other
people in the community could subscribe to this feed using an
application like Google Earth.
• Targeted search
– Let’s say you are creating a web comic, and you want other people
to be able to find it. By posting your comic with a microformat
agreed upon by the web comic community, the rest of the
community will be able to easily find your work using a search
engine.
Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-
introduction/
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

7. Why use microformats? (cont’d)
• CSS convenience
– Use semantic classes for styling instead of ad-hoc names: “Why
invent your own class names when you can re-use pre-defined
ones that give your site extra functionality for free?”
• Enhanced user experience (with the proper browser or plugins)
– Version 3 of the Firefox as well as version 8 of Internet Explorer are
expected to include native support for microformats
• Ability to leverage markup for your own uses (we’ll see an example of
this later)
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

8. Who’s creating the microformats?
• Microformats emerged as part of a grassroots movement to make
recognizable data items (such as events, contact details or geographical
locations) capable of automated processing by software, as well as
directly readable by end-users.
• As the microformats community grew, CommerceNet, a nonprofit
organization that promotes electronic commerce on the Internet, helped
sponsor and promote the technology and support the microformats
community in various ways. CommerceNet also helped co-found the
microformats community site microformats.org.
Source: http://en.wikipedia.org/wiki/Microformats
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

9. Who’s creating the microformats? (cont’d)
• Neither CommerceNet nor Microformats.org is a standards body. The
microformats community is an open wiki, mailing list, and Internet relay
chat (IRC) channel. Most of the existing microformats were created at
the Microformats.org wiki and associated mailing list, by a process of
gathering examples of web publishing behaviour, then codifying it. Some
other microformats (such as rel=nofollow and unAPI) have been
proposed, or developed, elsewhere.
• Some names associated with microformats:
– Dan Cedarholm
– Tantek Çelik
– Drew McLellan
– Eric A. Meyer
Source: http://en.wikipedia.org/wiki/Microformats
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

10. Where the specs are located and how to get involved
• Blog: http://microformats.org/
• Wiki: http://microformats.org/wiki/Main_Page
• Email list: http://microformats.org/discuss/
• IRC: irc://irc.freenode.net#microformats
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

11. Using microformats

12. Microformat specifications and drafts
• http://microformats.org/wiki/Main_Page#Specifications
• The ones I use:
– Specifications
• hCalendar
• hCard
• rel-license
• rel-nofollow
• rel-tag
– Drafts
• adr
• geo
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

13. hCard
• hCard is a simple, open, distributed format for representing people,
companies, organizations, and places, using a 1:1 representation of
vCard (RFC2426) properties and values in semantic HTML or XHTML
• Spec: http://microformats.org/wiki/hcard
• Probably easiest way to learn the format is by example:
http://microformats.org/code/hcard/creator
• The root class name for an hCard is "vcard". An element with a class
name of "vcard" is itself called an hCard.
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

14. hCalendar
• hCalendar is a simple, open, distributed calendaring and events format,
based on the iCalendar standard (RFC2445), suitable for embedding in
HTML or XHTML, Atom, RSS, and arbitrary XML.
• Spec: http://microformats.org/wiki/hcalendar
• Probably easiest way to learn the format is by example:
http://microformats.org/code/hcalendar/creator
• Note–the dtstart and dtend classes must be applied to abbr
elements.
• DATE_FORMAT(startdate, '%Y-%m-%dT%H:%i:00') AS
startdate
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

15. Rel-License
• Rel-License is a simple, open, format for indicating content licenses
which is embeddable in HTML or XHTML, Atom, RSS, and arbitrary
XML
• Spec: http://microformats.org/wiki/rel-license
• Rel-License is one of several MicroFormats. By adding rel="license" to a
hyperlink, a page indicates that the destination of that hyperlink is a
license for the current page.
– E.g. with the following hyperlink: <a
href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc
by 2.0</a> the author indicates that the page is licensed under a
Creative Commons 2.0 Attribution Required license.
• Multiple such rel="license" hyperlinks indicate that the page is available
under any of the referred licenses. E.g. the following hyperlinks could be
used to declare that a page is available under either a Creative
Commons 2.0 Attribution Required license or the Apache 2.0 license.
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

16. Rel-License (cont’d)
• Creative Commons license chooser: http://creativecommons.org/license/
• Dreamweaver Extension suite
(http://www.webstandards.org/action/dwtf/microformats/) from
the Web Standards Project (http://webstandards.org/) enables the
authoring of rel-license links from within Dreamweaver 8. Includes (cc)
defaults.
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

17. Rel-Tag
• Spec: http://microformats.org/wiki/rel-tag
• By adding rel="tag" to a hyperlink, a page indicates that the destination
of that hyperlink is an author-designated "tag" (or keyword/subject) for
the current page. Note that a tag may just refer to a major portion of the
current page (i.e. a blog post). e.g. by placing this link on a page, <a
href="http://technorati.com/tag/tech" rel="tag">tech</a> the author
indicates that the page (or some portion of the page) has the tag "tech".
The linked page SHOULD exist, and it is the linked page, rather than the
link text, that defines the tag. The last path component of the URL is the
text of the tag, so <a href="http://technorati.com/tag/tech"
rel="tag">fish</a> would indicate the tag "tech" rather than "fish".
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

18. Consuming microformats

19. Tools for reading microformats
• Firefox extensions:
– Operator
• A microformat detection extension developed by Michael Kaply at
IBM.
• https://addons.mozilla.org/en-US/firefox/addon/4106
– Tails
• The first microformat detection extension for Firefox by Robert de
Bruin.
• http://blog.codeeg.com/tails-firefox-extension-03/
Source: http://labs.mozilla.com/2006/12/introducing-operator/
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

20. Tools for reading microformats (cont’d)
• Operator builds on Tails Export by having a user interface that is based
around actions the user can take, instead of data types. Operator also
includes support for the microformats geo and rel-tag, and is compatible
with Firefox 2.
• Address book + Operator
• Blog post tag + Operator
• Maps + Operator
• Calendar + Operator
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

21. Building your own applications on microformats
• Great tutorial on mapping microformats with jQuery at 24 ways:
http://24ways.org/2007/unobtrusively-mapping-microformats-with-jquery
– Unobtrusive JavaScript
– jQuery
– Google Maps API
– Mapstraction
– http://24ways.org/examples/unobtrusively-mapping-microformats-
with-jquery/restaurants-plain.html
– http://24ways.org/examples/unobtrusively-mapping-microformats-
with-jquery/restaurants.html
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

22. Some sites that use microformats
• Flickr
• Meetup.com
• Technorati
• Upcoming.org
• Yahoo! Local
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

23. Microformat buttons
• http://www.factorycity.net/projects/microformats-icons/
• http://microformats.org/wiki/buttons
Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008