Sneaking microformats into here. And testing them until they work with Google Maps.

To see and use microformats in Firefox you currently need a suitable extension. If they get wide uptake, though, expect that to change.

(It’s such fun updating this old site. Once you get used to the tables and can skim through them blindly, at least.)

An hCard microformat worked example

Firstly, refer to a vcard syntax glossary like this one. There is also a hcard microformat creator, which works best with a little common sense added.

Both of those were less than 100% helpful in marking up some of the addresses I was doing today, though, so here’s an example of a fully marked-up company name and address with some tricky bits.

(This address is available freely on the web and was the first example I had to hand, unsurprisingly.)

In this example the address needs to show up as “BBC Media Management Scotland, Zone 1.02, Pacific Quay, Glasgow”.

With microformats you can’t put information in attributes (so you can’t do <span class="org" address="1 Balloon Street">Company</span> or similar). All the text you want to mark up has to be there, displayed on the page.

That’s a problem. There is no post code here.

Well, I found an incomplete post code for Pacific Quay, Glasgow on the web. G51—that’s enough to help your mapping software out, at least. How to include it without making it visible? I just cheated and told the browser to hide it: <span class="postal-code" style="display:none">G51</span>

Similarly to the post code, the country (Scotland) is not shown separately. This time it’s because the page is only aimed at people in Scotland, so it would look patronising and possibly US-centric at worst, merely bloated at best. So much for the site visitors, but mapping sites are almost all American and will assume the country is America unless told differently. Well, I could add another hidden span here, but wait a second. What was that organisation name again? BBC Media Management Scotland. There’s a usage of the word that already exists, ready for me to throw my class="country-name" around.

The full organisation name, then. There isn’t actually a company called called “BBC Media Management Scotland”. “Media Management Scotland” is a subdivision of “BBC”. A human reader will grok that, and with microformats we can get the computer to grok it too. <span class="fn org"><span class="organization-name">BBC</span> <span class="organization-unit">Media Management Scotland</span></span>

Or with the extra country-name: <span class="fn org"><span class="organization-name">BBC</span> <span class="organization-unit">Media Management <span class="country-name">Scotland</span></span></span>

And yes, you need to add both fn and org for it to understand that this is the name of an organisation. hcards were set up for people and org really refers to the company at which the named person works.

The address is fairly straightforward except for that “Zone 1.02”. Experimenting with Google Maps, I found that “Zone 1.02, Pacific Quay” turned up no results, even with the country name and partial post code included. “Pacific Quay” on its own does turn up the correct result. I could just not mark up Zone 1.02, leaving Pacific Quay as the full street address. But that’s changing reality to please Google or Multimap, which is dumb, and besides would be unhelpful to your readers if they want to export the full address, say to print some labels.

Luckily hcard microformats have a class called extended-address, I discovered after some digging. The examples I found used it for things like room or flat numbers in a building. That’ll do. <span class="extended-address">Zone 1.02</span>, <span class="street-address">Pacific Quay</span>

I think that’s all the tricky stuff in this example.

Full thing:

<span class="vcard">
  <span class="fn org">
    <span class="organization-name">BBC</span>
    <span class="organization-unit">Media Management Scotland</span>
  </span>,
  <span class="adr">
    <span class="extended-address">Zone 1.02<span>, <span class="street-address">Pacific Quay</span>,
    <span class="locality">Glasgow</span> <span class="postal-code" style="display:none">G51</span>
  </span>
</span>

Naturally, you’d want to remove the whitespace to get it to display inline without unsightly gaps around the commas. And you could replace the outermost span with a div to make it block-level.

Example on the web