Introduction to Microformats

Emily Lewis

University of New Mexico's Information Architects

Wednesday, April 29, 2009

About Emily

You'll Learn

What Are Microformats?

Sounds Complicated … Let's Make It Easier

The Basics

The Benefits

Sounds Good … How About Some Specifics?

Sounds Good … How About Some Specifics?

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:

hCard: Starts With Content

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

Emily Lewis

  • A Blog Not Limited
  • Albuquerque, NM 87106
  • emily@ablognotlimited.com

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

hCalendar: Starts With Content

hCalendar adds semantics to event information:

Standards & Accessibility With Dreamweaver

  • Wednesday, May 6, 2009; 6:30–7:30pm
  • Uptown Sports Bar and Grill
    6601 Uptown Blvd.
    Albuquerque, NM 87110

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><abbr class="dtstart" title="2009-05-06T18:30:00">Wednesday, May 6, 2009; 6:30</abbr>–<abbr class="dtend" title="2009-05-06T19:30:00">7:30pm</abbr></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:

  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><abbr class="dtstart" title="2009-05-06T18:30:00">Wednesday, May 6, 2009; 6:30</abbr>–<abbr class="dtend" title="2009-05-06T19:30:00">7:30pm</abbr></dd>
  4.       <dd class="location vcard"><span class="fn org">Uptown Sports Bar and Grill</span>
  5.          <ul class="adr">
  6.             <li><span class="street-address">6601 Uptown Blvd.</span></li>
  7.             <li><span class="locality">Albuquerque</span>, <abbr class="region" title="New Mexico">NM</abbr> <span class="postal-code">87110</span></li>
  8.          </ul>
  9.       </dd>
  10. </dl>

Microformats You Can Use Now

Microformats In the Wild (A Sampling)

Getting Started: References

Getting Started: References

My Getting Semantic With Microformats series of tutorials:

Getting Started: Authoring Tools

Questions? Comments?