Introduction to Microformats + a look at hCard & hAtom
Recently ‘Microformats’ has been a major buzz word in the web design community, but what are they all about? If you are feeling lost then this article is for you. This article explains what Microformats are, the benefits of using microformats, and how to implement them.
This article focus’ on the microformats hCard, and hAtom; both of which are used on the Blue Anvil site if you hadn’t noticed.
What are Microformats?
Microformats, quite simply, are a set of open data formats for representing data, based on existing technologies and standards, used for solving specific problems.
They are “Designed for humans first and machines second”, and semantically enhance the content of your website. For example, you can use a microformat to represent contact information (using hCard), reviews (using hReview), blog entries (hAtom), and relationships with other people (XFN). This content can then be read, and understood, by applications, search engines, and other sites making Microformats potentially very powerful.
Microformats don’t require any advanced code to use, they simply utilise existing markup by adding class names and attributes, making them very easy to implement.
You can combine different Microformats to make the content even more useful, for example, you could have a blog entry written by a guest marked-up with hAtom, and then have the authors contact details marked up as a hCard, also using XFN to describe how the author is related to you. You could even use ‘rel-licence’ to show the licence for the entry for copyright reasons. As you can gather, they make the content have more meaning, and this makes microformats extremely exciting.
How can Microformats benefit me?
Microformats encourage standards
By providing a standard way of marking up data, Microformats encourage standards. Using standards makes you content much more friendly to machines (e.g search engines) and can enhance your content. Standards are definitely the way forward on the web, and Microformats will help.
Microformats make styling with CSS even easier
Since Microformats uses classnames to describe the content, you can style the individual classes with css, meaning css styling should be easier. Of course this is nothing new, you may already be using class names in the same content to style with css, but this way will most likely be more semantic and efficient, not forgetting less confusing; I often find myself forgetting what classes do what (bad practice I know).
Microformats are semantic and descriptive
By using them you make you content kinder, and easier to read and maintain. Descriptive markup is much easier to go through, and understand when you need to read it e.g when doing site updates.
Microformats are machine readable
This is perhaps the biggest advantage to using Microformats; consider the benefits to your site if machines (including search engines) can read and understand your content. Your content is much more relevant and useful with Microformats.
Microformats could be used with ‘plug-and-play’ scripts
Since the class names are standard, developers can, in theory, create scripts (e.g javascript) that work on ANY site using microformats by utilising the standard naming conventions they offer. This will make development a lot easier in the long run.
How do I view/use Microformats?
Currently, as microformats are relatively new, the ways of viewing Microformats are limited. The best way I’ve found is a firefox extension called ‘Tails’. You can read more about it here -> http://blog.codeeg.com/tails-firefox-extension-03/.
After installing it, you will see a microformats icon in the status bar of you browser, when it turns green it means microformats have been found on the site. Clicking it lets you view these microformats.
The above screenshot shows my contact hCard in tails.
Another tool for using Microformats is found on Technorati, their contact feeds service.
This tool allows you to input any URL, and then it will automatically find any hCards on the target page and convert them to a download-able vCard for you to add to your email address book. As you can tell, this is very useful, and in the future, applications like this could make Microformats even more useful.
In the next section we will look at some microformats in greater depth…
Found this post useful? Why not buy me a coffee!
Related Entries
- Guide to Semantic Mark-up
- Creating an accessible yet sexy search box with CSS
- Window Resize/Mobile Browser Background Bugs
- Easy jQuery Pull Quotes
- Anti-aliased Rounded corners with JQuery
1 - Anthony says:
Great article that showcases some of the widest spread uses of Microformats, I’ll have myn up soon! Microformats is a word I found quite scary at first but the more you read about it the more you realise its possible widespread use.
Comment made on February 9, 2007 at 6:07 pm
2 - Dactura says:
I have been reading about hCard for two days… two 8 hour days and your article is the best. Especially appreciate that you have taken the time to take the vCard and format it nicely with CSS to appear as a business card. Nice touch!
I still have no idea how one prevents the spam-bots from harvesting all these vcards though! I do not think the mung will help; but I do believe the spam filters are getting much better.
Comment made on February 9, 2007 at 6:08 pm
3 - Mike J says:
Thanks
In regards to the spam bots, I know munging is not the perfect solution, but I havent had much problem with spam yet. There are other solutions out there, e.g javascript scripts for hiding mail, I personally havent tried them yet, but some could be effective (although no solution will ever be 100% effective).
Any contact details on the web are always at risk from spam, its a shame, even forms get abused.
Comment made on February 9, 2007 at 6:09 pm
4 - Astorg says:
This is the best article on hcards I have seen so far. I agree with oen earlier commenter, though, that spam can be a problem. He mung will not be enough since tests have shown that even a minged address that has never been used for anything else can get spammed. Could you suggest details of a javascript solution?
Comment made on May 29, 2007 at 3:00 pm
5 - The Lemonade Theme • Griffin & Hoxie says:
[...] Jolley’s awesome introduction to using hcard and [...]
Pingback made on March 28, 2008 at 7:44 pm
6 - Healing the Body says:
Don’t worry too much about spambots. You still have to eyeball your creations and allow a bit of time for manual editing.
Comment made on June 19, 2008 at 1:49 pm