1. Computing

Discuss in my forum

What are Microformats?

Making the Web More Semantic and Computer Readable

By

Microformats are a set of human-readable libraries added to HTML to make that HTML more semantic, and thus more computer-readable. You use microformats with existing HTML tags and attributes to define data that computers can use and humans can read.

Microformats are similar to microdata, and use the same libraries to mark up HTML, but microformats uses a different method of marking up the HTML from microdata.

Why are Microformats Important?

Microformats allow computers to do something with the information found on web pages (beyond simply displaying it, that is). For example, an event that is marked up using microformats can then be added to a reader’s calendar without the reader needing to type in any of the event data. Instead, they would simply click a link and the event would be automatically added to their calendar including the start and end times, location, and any other information that is marked up with microformats.

Microformats are also used by search engines to help mark up the search results to make them more interesting to the searchers. For example, a review marked up with hReview might show the star rating, reviewer, and other information right in the search results. Recipes marked up with hRecipe might have information like ingredients, time to cook, a photo of the dish, and so on all within the search results. And these more dynamic search results look more appealing and thus get more clicks.

Some of the most commonly used microformat vocabularies include:

  • hCalendar—To mark up events and add them to calendars.
  • hCard—To mark up people and companies and add them to address books.
  • hRecipe—To mark up food recipes.
  • hReview—To mark up reviews of products, services, events, and businesses.

How to Add Microformats to Your Web Pages

Unlike other standards such as microdata or RDFa, microformats use existing HTML attributes and elements like class, rel, and SPAN to define the microdata. For example, if you wanted to use XFN (XHTML Friends Network) to link to me, you might write:

<a href="http://webdesign.about.com/" rel="contact colleague">Jennifer Kyrnin</a>

If you’ve actually met me, you could add met to that rel attribute. But while XFN can be interesting, it does’t have a lot of applications right now.

One microformats vocabulary that is already supported by some mobile devices is the hCalendar format. This can be used to mark up events so that they can be added, as I mentioned above, to a calendar. Here is an example of how to mark up the following HTML using microformats.

<h2>Upcoming Events</h2>
<article id=bday>
<h3>Jennifer’s Birthday Party</h3>
<p>
<strong>When:</strong> <data value="2011-12-16">December 16, 2011</data> from <data value="2011-12-16T18:00-0800">6pm</data> until <data value="2011-12-17T00:00-0800">midnight</data>
</p>
<p>
<strong>Where:</strong> Jenn’s house
</p>
<p>
<strong>Why:</strong> Because Jenn wants to party!
</p>
</article>

This HTML is written in HTML5 and uses new elements like ARTICLE and DATA. You can also mark up HTML 4.01 documents with microdata.

To add the microdata, first you have to tell the browser that you’re using the hCalendar microformat by adding a class to the ARTICLE element:

<article id=bday class="vevent">

If you already have a class on the element, you just need to add a second class like you would any other multiple-class element.

class="otherClass vevent"

Then you can add the summary value to the name of the event, in this case the H1 element:

<h3 class="summary">Jennifer’s Birthday Party</h3>

As you can see, I have already defined the date of the event and the start and end times with the new HTML5 DATA element. The value of that element then includes a computer readable value. By adding the dtstart and dtend keywords to a class on those elements you can define the start and stop times for the event as well as the date:

<data class="dtstart" value="2011-12-16">December 16, 2011</data> from <data class="dtstart" value="2011-12-16T18:00-0800">6pm</data> until <data class="dtend" value="2011-12-17T00:00-0800">midnight</data>

The location needs to have a SPAN element surrounding it. Then you can add the location value. Typically the location is done in some format that can then be mapped, but in this case it’s not.

<span class="location">Jenn’s house</span>

Then your event is marked up with microformats.

Here is the full HTML of the event:

<h2>Upcoming Events</h2>
<article id=bday class="vevent">
<h3 class="summary">Jennifer’s Birthday Party</h3>
<p>
<strong>When:</strong> <data class="dtstart" value="2011-12-16">December 16, 2011</data> from <data class="dtstart" value="2011-12-16T18:00-0800">6pm</data> until <data class="dtend" value="2011-12-17T00:00-0800">midnight</data>
</p>
<p>
<strong>Where:</strong> <span class="location">Jenn’s house</span>
</p>
<p>
<strong>Why:</strong> Because Jenn wants to party!
</p>
</article>

©2014 About.com. All rights reserved.