Web Development

Add meaning to Web pages with microformats

The sole purpose of microformats is to create larger, more reliable webs of data, published by more people. The microformats approach is the low-cost, efficient way to build a web of data. Learn more about the various microformats available.

One thing that makes the Web so interesting is that it's constantly changing, as new technologies and techniques are introduced on an almost daily basis. A technology that has gathered steam the past couple years is microformats. Microformats allow you to add context to existing information contained within a Web page.

The semantic Web

The semantic Web is an evolving extension of the Web. It says that Web content can be expressed not only in natural language, but also in a format that can be read and used by software agents. This allows the software agents to more easily find, share, and integrate information.

While the semantic Web is designed for machines first, microformats are designed for humans first. The goal of microformats is to create a web of data that anyone can publish, consume, and so forth. There is a low barrier to entry for the microformats concept, so anyone with an understanding of XHTML can easily publish their own microformats.

What are microformats?

Microformats provide a more formalized technology for adding commonly used semantics to today's Web. Microformats are a set of open data formats that use existing technology and standards, most notably XHTML. The microformats site makes the following assertions about the technology:

  • Microformats are a way of thinking about data.
  • Microformats are design principles for formats.
  • Microformats are adapted to current behaviors and usage patterns.
  • Microformats are highly correlated with semantic XHTML.
  • Microformats are a set of simple data formats that many are actively developing and implementing.

A key concept is the usage of existing technologies (such as XHTML) that have been well tested. This allows developers to focus on the data as opposed to the technology.

Microformats in practice

A common application of microformats is providing contact or event data. The hCard microformats specification provides a guideline for including contact data within a Web page.

The hCard standard is a simple, open, and distributed format for representing people, companies, organizations, and places. It closely follows the vCard standard. The hCard standard defines specific elements for defining pieces of data.

The different data elements are specified using the class attribute (all class names are lowercase). The complete contact card is comprised by the vCard class, so this class is applied to a DIV element that contains the complete contact information. Individual data elements on the card are designated with the appropriate class name. For example, a person's state is designated by the region class.

The following listing provides a look at a possible hCard for myself. It lists my name, organization (TechRepublic.com), city (Louisville), state (Kentucky), and country (USA).

<div id="hcard-Tony-Patton" class="vcard">

<a class="url fn" href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/">Tony Patton</a>

<div class="org">TechRepublic.com</div>

<div class="adr">

<span class="locality">Louisville</span>,

<span class="region">KY</span>

<span class="country-name">USA</span>

</div></div>

I could easily include this data in a Web page since it is standard XHTML. The data could be easily read by other applications that understand the hCard format. Also, the data could easily be formatted for presentation using standard CSS since the data is contained within basic XHTML.

The hCard Creator tool provides an easy way to assemble the appropriate hCard for a contact. Another common use of microformats is for providing information about events. This is accomplished with the hCalendar format.

The hCalendar specification is an open standard based on the iCalendar standard. The hCalendar format follows the approach used by the hCard standard; that is, class names are used to tag data elements.

The complete event is contained within a DIV element and assigned the vevent class name. Individual aspects of the calendar entry are contained within this DIV element. The start and end dates are marked by the dtstart and dtend class names with the title attribute containing the full date. The following illustrates a sample event for last week's Web Development column.

<div class="vevent" id="hcalendar-Web-Development">

<a class="url" href="http://www.techrepublic.com/blog/programming-and-development/?p=541&tag=nl.e055" mce_href="http://www.techrepublic.com/blog/programming-and-development/?p=541&tag=nl.e055">

<abbr class="dtstart" title="20071106">November 6th</abbr>,

<abbr class="dtend" title="20071107"> 2007</abbr>

<span class="summary">Web Development</span></a>

<div class="description">Weekly Web Development column.</div>
</div>
The hCalendar Creator is available for marking up your own calendar entries. (Note: I could not get it to work in Internet Explorer 7, but it worked fine in Firefox.) Like hCard data, you can easily present the data on a Web page and style it with CSS -- while the data is still available in the hCalendar format for use by other applications.

Industry support

I'm happy to say that the IT industry is finally starting to embrace microformats. Yahoo! has been a big proponent of microformats from its inception. In addition, the Eventful site uses them, as does the photo-sharing site Flickr. Even Microsoft recognizes the technology, as proven in this blog post about using microformats with SharePoint. The Twitter site also embraces the hCard standard. Firefox offers the Operator add-on to provide microformats support within the browser.

There are various tools for working with microformats in numerous development languages. A good example is Sumo, which offers a microformats parser for the JavaScript language. A Perl module is available with the Text::Microformat, which offers a microformat parser for Perl.

Adding context

A key concept of the microformats technology is that they are designed for humans first and machines second. The sole purpose of microformats is to create larger, more reliable webs of data, published by more people. The microformats approach is the low-cost, efficient way to build a web of data. Learn more about the various microformats currently available on the microformats site as well as those covered in this article.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

18 comments
Interested Amateur
Interested Amateur

I have a question that is first and foremost for any programmer and that is the cost. How much extra memory will these microformats use compared with putting the info in a paragraph? And how much will this added memory 'cost' the business owner? Remember, you have to explain your reasoning in dollars and cents. This added code could become enormous with a large enterprise. Just musings from a retired gentleman. Interested Amateur

klaasvanbe
klaasvanbe

It just takes up more space. The code is yet written and reused millions of times and more. Space is cheap. One can buy 1 terabyte for less than 200 euros. Better yet: 1 gigabyte on the Internet is completely free. It's way more expensive to get extra code written by developers who have limited time.

rpitera
rpitera

Has it occurred to anyone that by making it easier for search engine robots, we are also making it that much easier for spam harvesting bots to bypass unneeded info and go directly to the contact information? By adding semantic context, we are pretty much serving it up on a silver platter.

techrepublic
techrepublic

... of a professional in any given field is that he is able to recognize a good idea when he sees one. Tony Patton is obviously a professional. The rest of you -- not so much. Do you so lack imagination that you have to be spoon fed every - little - fracking - thing? None of you could come up with one single good application for MicroFormats. Did you go to the web site? Did you read it? If you still don't get it, you had better think about changing careers. Amateurs!

rpitera
rpitera

...coming from someone who obviously cannot produce a rationale for this or an answer for anyone's GOOD QUESTIONS or any application examples YOURSELF! I would say that the 'hallmark' of a poorly constructed argument is an ad hominem attack. (Attack the arguer rather than address the argument, in case you didn't take Latin...) I imagine you must endear yourself to clients everywhere when you loudly proclaim them idiots and infidels for not understanding your pontifications. Must be a real treat to work with you. The point of being a TRUE PROFESSIONAL is using your intelligence and ability to distill such information in an easily digestible form for consumption by the nice folks who hire us. Don't get me wrong, I'm glad there are still guys like you out there, doing my marketing for me! If this is the way you treat your colleagues, one can only imagine the contempt you have for your CLIENTS...perhaps YOU should consider changing careers. It's patently obvious from your rant that you're not happy with the once you're in now!

techrepublic
techrepublic

... is exactly what was called for in this instance. However, I didn't attack anyone individually, just the responses of the group collectively. It seems that I must have struck a nerve with you, though. Hey, if the shoe fits, wear it. Also, it was never my intention to provide a list of uses for MicroFormats but only to point out that none of you, (including yourself!) were able to think of even one and felt compelled to put down the author. You, if you had the ability to recognize a good idea in your field, could point out to you clients that MicroFormats provide a standard, industry-accepted way of exchanging common information like contact info, seminar notices, and oh yes, product info. I could come up with dozens more, but you get the point (well, maybe not.) And finally, I'm very happy with my career and my clients are *very* happy with me, an expert who can recognize a good idea when he sees one. I generally get called in after the fact to clean up after people like you. So much for marketing.

deepsand
deepsand

ones goal is to simply irritate ones opponent, thus goading him into responding in an irrational manner. The issue at hand is that, as presented, micro-formats appear to be a solution in search of a problem. The question remains; what problem(s) does(do) micro-formats solve?

vinaykumar_1983
vinaykumar_1983

But can you tell me whats the use for putting the hCard into an site??

techrepublic
techrepublic

What wasn't explained in very plain English is that every page a human reads, a machine reads as well. Some for different reasons. The most important reason to us is indexing by search engines. What was the value of the old standard meta tags? No human reading a web page even saw them. The microformats serve both man and machine. The value to your customers is better ranking on search engines' results based on locale as one example. If every address you put on a page for humans to read is written in a microformat, the spiders that also read the page that employ tools to help sort pages out by locale will have a higher confidence that your page is actually about a business in Timbuktu. Real important to a guy like tomcloyd above who builds pages for professionals who are looking for local customers.

deepsand
deepsand

What shortcomings currently exist that are met by micro-formats?

FranC.
FranC.

And this has to do with what and how is it going to benefit clients who just want a simple website created or more specifically, how is it going to benefit the audience?

kitico
kitico

I had to read almost half of your posting before I knew what you were talking about. Your "definition" section completely failed to define a microformat and you never properly explained how a microformat builds a better web of information than an ordinary web page with hyperlinks.

aspatton
aspatton

I apologize if the definition was less than clear. The idea with microformats is to include information on a page that is both readable by humans and machines. So, data formatted via microformats is easily consumed by search engines. Technorati has built an example - http://kitchen.technorati.com/search.

rpitera
rpitera

I don't mean to rant, but it feels like once again the industry is going to push a new "standard" for it's own sake - how does this really make data any easier for search bots AND humans? Some div tags and XML tags? My client sites don't use any of this and yet they somehow still manage to have superior search results. What's more important is the relevance of the data to the content on the page; that's what search engines (AND HUMANS) are most interested in anyway! Where's my incentive to put extra tags in beyond having yet another thing the client doesn't really understand and has to trust the reasons that I am charging them for...or is that an end to itself. I am firmly convinced that in our industry, as soon as end users/clients begin to understand and grasp the relevancy of something, salespeople try to figure out a new way to make it complex so that we can continue to sell things people didn't ask for or need in the first place. We need to start respecting our clients intelligence a bit more before they revolt. Then again, since most of my market is people who have been frustrated by the BS they have been sold by OTHER consultants...you guys go right ahead and play into my marketing plan!

rpitera
rpitera

So instead of people searching and finding, we now want to change the way they search...I think *you* are missing the point; it's about making it easier for the end users by adapting to the way THEY work, not the other way around. If I am searching for Adobe's mailing address, why can't I just type "Adobe Corporation AND mailing address" instead using some special syntax to search microformatted address cards? It just seems to me to be a solution without a problem...which happens so often in this industry that we are beginning to accept it as SOP.

MadestroITSolutions
MadestroITSolutions

If you run a search in Google for some company name, you will probably get all matches that contain the keywords you are using, in whatever context they appear, whereas having the information "marked" in this fashion (microformats) allows the search agent to pick up the information in a particular context, such as an address card. This way, they can now present you with an option to search for "address cards" which will give you targeted results, not just anything that contains your keywords.

tomcloyd
tomcloyd

This is a request for help. I've looked at microformats, and I've wanted to like the idea. It makes sense, up to a point, but...I always stumble on this: exactly what is this going to do for me? I need some usage examples. This is especially an issue in the context where I work: I run for myself, and design for others at times, websites focused on delivering psychotherapy services. Neither our clients nor the service providers behind these sites are typically at all computer savvy. How do I sell microformats to THEM? Or use them for their benefit? If 10 of us professional psychotherapist webmasters used microformats on our sites, what difference would that make? I really hope there's a good answer out there somewhere. I'll revisit the microformats website, but the last time I was there it reeked geek so badly that I turned and ran. That sort of stuff makes some CS major's day, but does very little for the rest of us. Can anyone help with my issue?

aureolin
aureolin

This is all well and good and, after reading the article, I have only on question: What is a microformat??? You definition sounds like bad marketing-speak. Sort of like defining a car as a means of personal, independant expression. Yeah, but you have no idea of what a car is from the definition.

Editor's Picks