In this new age of semantic (X)HTML and standards, something I’ve been hearing alot about is Microformats, so I decided to check out what the hell they are and how I could benefit from them.
After doing a little bit of research, I found out that Microformats are a way to enrich mark-up to make the internet a much moe friendlier place without affecting presentation on-screen. Microformats also make your webpages much more compatibile with web applications, as they can then extract the specific data relevant to that application. I found this great resource at xfront.com which really helped me break down what Microformats were;
The purpose of microformats is to:
- Enrich the semantics of Web documents.
- Enrich the semantics of the whole Web. Via a bottom-up, grassroots fashion, one Web document at a time.
- Create standard semantic labels. Via a clearly defined community process.
- Leverage existing standards (don’t reinvent)
The real crux is however that designers like myself do not need to mark up our pages any differently just add to the tags, associating them with pre-defined class names which are then picked up by web applications. And as they do not change the presenation of the design of the page, they do not impose any constraints on my creative flair.
Paul Boag (who’s podcast I eat up on a weekly basis) also wrote in this months .net mag that designers and developers should be using microformats wherever possible so I decided to take his advice and try and implement a hCard into my contact page on my site.
It was incredibily easy, I justed added the pre-defined classes to each specific data type as below:
<div class="vcard"> <span class="fn n"> <span class="given-name">Barry</span> <span class="additional-name">Gerrard</span> <span class="family-name">McGee</span> </span> <div class="adr"> <div class="street-address">16 Clontycarty Lane</div>
<span class="locality">Tynan</span> , <span class="region">Co. Armagh</span> , <span class="postal-code">BT60 4RE</span> <span class="country-name">N. Ireland</span> </div>
I also incorporated the “tel” class into my telephone number in my footer to prevent duplication and…voilia!
