Microformats Understood

by Charles Iliya Krempeaux, published on Fri Aug 26th, 2005

Until just now I didn't really get Microformats. The following section from their website is what made me understand it:

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.

This is what made me realize that Microformats are implemented using existing XHTML or HTML elements. That way they are something that can always be viewed by humans (since they're implemented using existing HTML elements) but can also be parsed by software (like web crawlers) to extract semantic knowledge.

I used to think Microformats were simply a new name for things like:

  • XML Namespace based extensions. (Like RSS modules.)
  • Attribute based extensions. (Like Atom link extension mechanism.)

And other things such as that. (But they are not.)

In some cases I think Microformats work great. Things like rel-license and rel-tag are examples of great Microformats. However, I see problems with some. (Although maybe I'm missing something.) For example things like the hCalendar and hCard Microformats are identified by the class attribute. That seems to like a bad idea to me. Here's an example hCard:

        <div class="vcard">
            <a class="url" href="http://changelog.ca/">
                <span class="n" style="display:none"> <!-- hide this from display with CSS -->  
                    <span class="family-name">Krempeaux</span>
                    <span class="given-name">Charles Iliya</span>
                <span class="fn">Charles Iliya Krempeaux</span>

You can't force people not to use your magic class name. It's common practice to apply the class attribute everything to apply CSS styles to them. And this may confuse we crawlers and any other type of software trying to obtain semantic knowledge.

Instead of using the class attribute I think what I'd do is bring in a new attribute through a new namespace. (Although that will only work for XHTML and not HTML.) For example:



            <div vcard:name="vcard">
                <a vcard:name="url" href="http://changelog.ca/">
                    <span vcard:name="n" style="display:none"> <!-- hide this from display with CSS -->
                        <span vcard:name="family-name">Krempeaux</span>
                        <span vcard:name="given-name">Charles Iliya</span> 
                    <span vcard:name="fn">Charles Iliya Krempeaux</span>

Also, this nice thing about this is that if you follow the normal RSS Module style of doing things, the URL for the XML Namespace will point to a document that details the extension.

But, strictly speaking, that wouldn't really work with HTML. (Although I wonder if it would break web browsers to use it anyways.)

Read more about: , , , .


No known comments. (There may be some out there though.)

New Comments

Want to write a comment to this post on your own blog? Then use the HTML code below to link to this article....

Or better yet, use the quote-o-matic below by "selecting" the part of the text (in the article) that you want to quote, and then use the HTML code that will get generated below to link to this article....