Simple address formatting solution
Recently I figured out a cleaner way of lining up address details in a simple definition list and thought I would share it on here.
You can preview the html and css to see how it scales nicely (using em’s for the measurements). You could take off the borders and background colour etc and just use the CSS to line up the addresses or style it some more with background images etc. Have a play about if you need to line up contact details like this.
I tested it on Win IE 6 & 7, Win & Mac Firefox 1.5 +, Safari and Opera 9+.
A step further… add some Microformats
If you’re in the mood, (like I was) you could jazz it up with some microformats using the hCard format. See example page with microformats.
Preview of the xhtml:
Updated to include fn on company name thanks to Michael Kaply
I have only just started playing with microformats, so I tested it with the Tails Firefox Extension 0.3 which lets you preview microformats embedded on a web page. Here’s my results:
I was happy to see that it did pull out all the right information. I plugged the hcard classes into my already well-formed xhtml and hoped that would work. And it seems ok (except it did not pull out the fax number which I now know is deprecated). I have checked other examples and I couldn’t find an example that had been marked-up in a definition list.
Is there a reason why most hcards seem to be marked up in div’s? Please let me know your thoughts. 
This is how I’ve always done my hCards, it makes perfect sense.
You can see this over at the TLC Contact page and on the the community venues for the same site.
There the only examples I’ve got live, but the new Creation site will have it… soon!!!
I know there are some issues, as my DLs are build dynamically built, and I need to iron out duplicate/non-required hCard-related classes).
Your hCard is invalid because it doesn’t have an fn.
should be:
My Fabulous Comapany Name
Oh that’s cool to see another example in dl’s. It does work well.
Thanks for the note about the “fn” Michael. I have updated the examples and the code above.
It’s because contact numbers are supposed to have both type and value. The markup goes something like:
[x class="tel"]
[y class="type"]Home[/y]
[y class="value"]02012345678[/y]
[/x]
[x class="tel"]
[y class="type"]Fax[/y]
[y class="value"]02012345678[/y]
[/x]
[x class="tel"]
[y class="type"]Work[/y]
[y class="value"]02012345678[/y]
[/x]
It’s a bit of a bugger… The need for a container scuppers a definition list. The key/value stuff is buried in the spec: http://microformats.org/wiki/hcard#Value_excerpting.
If you only have one number I think you can use the shorthand, as you have in your example:
[dd class="tel"]02012345678[/dd]
Lately I’ve been using a little table for multiple numbers. Caption: contact numbers; Headers: type, number. Seems like a good semantic fit…
Arr, I see. That makes sense, and also explains why “fax” is deprecated. Cheers Mike.
Have you got a table example? Would love to see.
Thank you so much Laura, it’s bookmarked. I’ve been thinking about implementing an hCard for months now and feel bad each time I bump into Tantek since I told him I would add it on my blog
I just kept on postponing this. It seems really easy to do, much easier then I thought. Next update I do on the blog I’ll add this hCard, so it’s over and done with and I can stop feeling bad 
Yeah I have been guilty of it too, hence this post. I thought it would be a good reference and a useful test. I was going to add one on my site but I don’t have anything other than my email address to share and that’s encoded which causes problems when someone tries to add it to their address book so I left it out.