Introduction to Microformats

About Emily

• Web Designer/Front-end Developer for Pitney Bowes Business Insight
• Specializes in semantic markup and CSS, accessibility, usability and microformats
• Writes about web design (and other topics) at A Blog Not Limited
• Author of Microformats Made Simple, scheduled for release at end of October 2009.

You'll Learn

• What are microformats
• Benefits of microformats
• How to enrich your content with some common microformats
• Where you can see microformats in action
• Lots of resources to help you implement microformats

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."
• "Microformats enable the publishing and sharing of higher fidelity information on the web."
• "Building blocks that enable users to own, control, move and share their data on the web."

Sounds Complicated … Let's Make It Easier

• Microformats are sets of HTML attributes and values that are applied to common web content — people, events, blog posts, reviews, tags — so that content can be extracted by software and indexed, searched for, saved, cross-referenced or combined.
• "Markup, with more meaning"
• "Smart content"

The Basics

• Use existing standards: (X)HTML
• Emphasize semantics (POSH)
• Intentionally simple
• Address a specific "problem"
• Humans first, machines second

The Benefits

• User experience enhancements
• More meaningful search results
• Encourages consistency and standards
• Minimal development effort
• No need for software or special technologies
• Enables sharing and re-use of your web content elsewhere

Who Benefits?

• Managers
• Designers
• Developers
• Content authors
• Users

Check out Microformats Role Play for more on the benefits of microformats according to job role.

Sounds Good … How About Some Specifics?

• Contact information — person, place, organization/company — marked up with hCard can be automatically extracted from your web page and imported into users' address book programs (e.g., Outlook, Apple Address Book, Yahoo! Address Book).
  • Technorati's Contacts Feeds Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit

Sounds Good … How About Some Specifics?

• Event information marked up with hCalendar can be automatically extracted and imported into users' calendars (e.g., Google Calendar, Outlook, Apple iCal)
  • Technorati's Events Feeds Service
  • Operator Plug-in for Firefox
  • Tails Export Plug-in for Firefox
  • Oomph Microformats Toolkit

A Simple Example: rel-tag

Describes the relationship of links containing tags (keywords) for your content

<a href="/tags/microformats/" rel="tag">microformats</a>

The rel="tag" attribute-value pair indicates the link destination (href) is to a page that tells what the current page — or part of the current page — is about.

What Can You Do With rel-tag?

Other than the semantic value, adding rel-tag supports context-specific searching:

• Technorati's Tags
• Operator Plug-in for Firefox

hCard: Starts With Content

hCard adds semantics to contact information for people, places and organizations/companies:

hCard: POSHify

Next, add good, valid and semantic markup to your content:

1. <dl>
2.    <dt>Emily Lewis</dt>
3.       <dd>
4.          <ul>
5.             <li><a href="http://www.ablognotlimited.com">A Blog Not Limited</a></li>
6.             <li>Albuquerque, NM 87106</li>
7.             <li><a href="mailto:emily@ablognotlimited.com">emily@ablognotlimited.com</a></li>
8.          </ul>
9.       </dd>
10. </dl>

hCard: Add the Microformat

Last, drop in the necessary HTML attributes and values for hCard:

1. <dl class="vcard">
2.    <dt class="fn">Emily Lewis</dt>
3.       <dd>
4.          <ul>
5.             <li><a class="url" href="http://www.ablognotlimited.com">A Blog Not Limited</a></li>
6.             <li class="adr"><span class="locality">Albuquerque</span>, <abbr class="region" title="New Mexico">NM</abbr> <span class="postal-code">87106</span></li>
7.             <li><a class="email" href="mailto:emily@ablognotlimited.com">emily@ablognotlimited.com</a></li>
8.          </ul>
9.       </dd>
10. </dl>

Worth Noting

• Markup doesn't matter. But it should be POSH.
• Attribute values are case-sensitive
• "Root" properties (such as vcard in the hCard example) cannot be combined with sub-properties
• You don't need additional class values for styling but you can still use additional classes that aren't part of microformats
• Sometimes you need to add non-semantic elements such as span to contain content that needs a microformat attribute-value pair

hCalendar: Starts With Content

hCalendar adds semantics to event information:

hCalendar: POSHify

Add good, valid and semantic markup to your content:

1. <dl>
2.    <dt><a href="http://www.webuquerque.com/Events/Standards-Accessibility-Dreamweaver.php">Standards & Accessibility With Dreamweaver</a></dt>
3.       <dd>Wednesday, May 6, 2009; 6:30–7:30pm</dd>
4.       <dd>Uptown Sports Bar and Grill
5.          <ul>
6.             <li>6601 Uptown Blvd.</li>
7.             <li>Albuquerque, NM 87110</li>
8.          </ul>
9.       </dd>
10. </dl>

hCalendar: Add the Microformat

Drop in the necessary HTML attributes and values for hCard:

1. <dl class="vevent">
2.    <dt><a class="summary url" href="http://www.webuquerque.com/Events/Standards-Accessibility-Dreamweaver.php">Standards & Accessibility With Dreamweaver</a></dt>
3.       <dd><span class="dtstart"><span class="value-title" title="2009-05-06T18:30:00"> </span>Wednesday, May 6, 2009; 6:30</span>–<span class="dtend"><span class="value-title" title="2009-05-06T19:30:00"> </span>7:30pm</span></dd>
4.       <dd class="location">Uptown Sports Bar and Grill
5.          <ul>
6.             <li>6601 Uptown Blvd.</li>
7.             <li>Albuquerque, NM 87110</li>
8.          </ul>
9.       </dd>
10. </dl>

Combining Microformats

Where it makes contextual sense, combine microformats:

Microformats You Can Use Now

• hCalendar: event information
• hCard: contact information
• rel-license: license links
• rel-nofollow: restricting increased page rank for links
• rel-tag: tag links
• VoteLinks: for, against and abstain links
• XFN: distributed social networks
• XOXO: outline content

Microformats In the Wild (A Sampling)

• XFN
  • Twitter, Flickr, HuffDuffer, Digg, LinkedIn, Plaxo, Technorati, Last.fm, Google Social Graph API, Ident Engine
• rel-license
  • Creative Commons, Yahoo! CC Search, Google "Usage Rights" search
• hCard
  • Google Rich Snippets, Google Maps, Yahoo! Local, Google Profiles, Twitter, Last.fm
• hCalendar
  • Yahoo! Upcoming, MapQuest Local, Facebook, Last.fm, Eventful
• hResume
  • LinkedIn, SimplyHired

Getting Started: References

• The Microformats Wiki has a ton of information … but I wouldn't start there
  • Very "techy," with lots of geek-speak
  • Not the best markup examples for POSH
  • A good resource once you understand the basics
• Microformats: Empowering Your Markup for Web 2.0 by John Allsopp
• microformatique
• Follow @microformats on Twitter
• Microformats Made Simple by Emily Lewis

Getting Started: References

My Getting Semantic With Microformats series of tutorials:

• rel-home, rel-tag, rel-license
• XFN
• hCard
• hCalendar
• hAtom
• hResume
• Themes & Issues

Getting Started: Authoring Tools

• Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in
• Dreamweaver Microformats Extension
• hCard Creator
• hCalendar Creator
• hReview Creator
• Optimus Microformats Transformer also offers a validator

Questions? Comments?

• Email me: emily@ablognotlimited.com
• Follow me on Twitter: @emilylewis