1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
Thus far the promise of the semantic web remains unfulfilled. Machines still aren't very good at understanding the code they're rendering, but Microformats are changing that.
Perhaps the most difficult part of microformats is explaining what they actually are. The short answer is that microformats are a way of adding semantic meaning to HTML tags. First and foremost, microformats were designed to be easy for humans to read and write. If you know HTML, you know microformats.
Tantek Çelik, chief Technology Officer at Technorati and creator of microformats, describes them as a way of "making web pages both more useful and more usable to the average person."
The real power of microformats is in the way they refine data that already exists.
##What Microformats Do##
Right now your data is spread across the internet, photos on Flickr, friends on Facebook, bookmarks at ma.gnolia, calendar on Google Calendar and so on. Microformats can make it easier to track and aggregate that data into one centralized space -- your own domain, a blog or perhaps your personalized homepage.
In many ways microformats have the potential to replace web-based APIs and make data that was once only available to those with programming skills, available to anyone who knows a bit of HTML.
And it isn't just people, search engines can use microformats to provide better results. "By marking up contacts with hCard, events with hCalendar, reviews with hReview, listings with hListing, search engines will be (and are) able to find that information on those sites better," Çelik says.
Instead of guessing what information is on the page, microformats can tell search engines exactly what data they are looking at. For instance, as Çelik points out, "rel-license, the microformat for license links, is parsed and supported by Google and Yahoo's license/CC search." And rel-tag is supported by Technorati and others for browsing tagged blog posts.
##Usage Overview##
The basic example used to illustrate the power of microformats is the hCard format. An hCard accomplishes the same thing a vCard does -- click on an hCard on somebody's web page and you can add that person to your address book in an instant.
The hCard format is probably the most widespread of all microformats, the hCard standard is already in use on contact and profile pages around the web, heck even [http://microformats.org/blog/2006/07/28/steve-martin-has-an-hcard/ Steve Martin] has one -- yes, that Steve Martin.
Another excellent example of the way microformats can make your life easier is the [http://microformats.org/wiki/hcalendar hCalendar] format. The popular social networking site Facebook is one of many sites that encode calendar events in hCalendar format making it easy to add events to your calendar.
Click on an event and it gets added to your hCalendar-compatible calendaring application. Most web calendars and desktop calendars have support for these microformats.
Another, arguably more powerful, application of microformats is the [http://microformats.org/wiki/hlisting-proposal hListing] microformat. Imagine you want to sell something on the web; you could head to an auction site, create an account, list your item and post the information. But why bother with all that when you could just post your item on your blog using the hListing format?
Sites like [http://www.edgeio.com/ Edgeio] can scrap hListing data and aggregate it to a larger community which can then bid to you directly, without the hassle of creating and listing an item on multiple sites.
A complete list of microformats can be found on the [http://microformats.org/wiki/Main_Page microformats wiki].
##Real World Example##
To get started with microformats let's consider the most basic example, the rel="tag" format. Many people are probably already using this without even realizing it's a microformat. The syntax is simple, start with an ordinary link tag like this:
<a href="http://mysite.com/wine/" title="my thoughts on wine">wine</a>
Now if we just add one additional attribute we'll have a microformat that tells search engine spiders that our link is to a page (at least partly) about wine.
<code><a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">wine</a></code>
The only thing to note is that the url determines to tag, not the link text. in other words:
<code><a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">beer</a></code>
would be read as a link to the tag wine, **not** beer.
So far so good, how about something more sophisticated. Let's give hCard a try. Here's some example code:
<code>
<div id="hcard-Scott-Gilbertson" class="vcard">
<a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
<div class="org">Wired News</div>
<a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
<div class="adr">
<div class="street-address">3rd Floor, 520 Third Street</div>
<span class="locality">San Francisco</span>,
<span class="region">CA</span>,
<span class="postal-code">94107</span>
<span class="country-name">USA</span>
</div>
</div>
</code>
And here's what it would look like rendered in a browser:
<div id="hcard-Scott-Gilbertson" class="vcard">
<a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
<div class="org">Wired News</div>
<a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
<div class="adr">
<div class="street-address">3rd Floor, 520 Third Street</div>
<span class="locality">San Francisco</span>,
<span class="region">CA</span>,
<span class="postal-code">94107</span>
<span class="country-name">USA</span>
</div>
</div>
If the writing the code yourself is too laborious there's always the [http://microformats.org/code/hcard/creator hCard creator]. In fact nearly all of the more complicated microformats have code creators that take your input and spit out some cut-and-paste code you can drop into your site.
For more examples and an in-depth look at various microformats see our more detailed tutorials on [link hCard], [link XFN], [link hCal] and [link hListing].
|
