In this reference, we cover the standards (or, to use the W3C’s parlance, recommendations) that apply to HTML/XHTML elements and attributes. If you’ve read through all that information, you may have found yourself thinking from time to time, “Well, that’s all well and good, but how do I mark up the address of the place I live?” Or perhaps you’ve wondered “How should I mark up something like the date of an event?” If you’ve had any thoughts along these lines, you’ll be pleased to hear that these are situations in which Microformats apply.
In the current flavours of HTML and XHTML, there are a number of
elements that appear, in today’s environment, to be mostly irrelevant. For
example, when can you see yourself using the
tt elements? I never have. And
yet, even with the inclusion of such seemingly superfluous elements, which
appear to have been conjured up by a bunch of scientists for whom they
have limited practical use, there also appear to be some omissions from
the recommendations—for instance, the address example I mentioned
Now, those paying attention—and those who have devoured the contents of
this reference from go to woah—may well be saying at this point, “Ah, but
there is an element for addresses. It’s called
address.” Alas, you’re
mistaken! A quick check of the reference for that element will reveal that
it’s not used to mark up a physical location, but is in fact intended for
identifying the point of contact for a given web page, so it may include
an email address, a telephone number, or something of that ilk. If the
address element is used to mark up a location
(containing a street number, street name, city, and so on), it’s actually
been misused. Are there any options for marking up a physical address?
Microformats were intended to plug the gaps in the current standards
using only standard and valid HTML/XHTML constructs. How is this
possible? By adding to those standard elements a defined set of class
attribute values that are based on a preexisting standard. So, for
example, if you want to mark up someone’s contact details, you can use
hCard, the Microformat for this purpose, which is based on the older,
standardized vcard format (the use of hCard will be covered fully in a
The various aspects of the contact details—family name, given name,
locality, street name, and so on—are all identified by the
class attribute, which can be applied to any HTML
element; you can also make use of those class names for the purposes of
It’s no great secret that the machinery inside the W3C can turn very slowly at times, much to the frustration of web developers, programmers, and designers the world over. However, in the case of Microformats, it’s a slightly different story. Sure, the standards for Microformats are peer-reviewed and ratified, but this happens much more quickly. In the time that it’s taken the W3C to discuss CSS3 (to pick just one recommendation in the works at this time), the whole concept of Microformats was born, and several standards were defined, with more nearing completion all the time.
In a nutshell, if a mechanism for marking up HTML for a specific purpose is to be accepted (and, one hopes, used) as a Microformat, it needs to tick all of these boxes:
- The Microformat must solve a problem (not create some fancy-pants schema for marking up something that already exists or doesn’t warrant it).
- It should start as simply as possible.
- It should be designed for humans first, and machines second.
- It should reuse existing and widely used standards (such as IETF).
- It should encourage decentralised development/services (for example, aggregator services).
To give you an idea of how Microformats can benefit web users, let’s take a look at a real-world example from Google.
Google Maps and hCard
When Google added microformatted content to its search results, it would have been all but invisible to most regular users. It probably took very little work for Google’s developers to add the required class attributes to the search results, though, so it wouldn’t have been wasted effort. But for many people—myself included—the addition of the hCard Microformat offered an excellent new feature. This feature’s functionality does require users to add to their browsers a toolbar that can detect the presence of Microformats on a page. Personally, I’ve tried both the Tails extension and the Operator extension (both for Firefox). Once I added these toolbars to my browser, the process of using Google maps to search for local restaurants worked like this:
- I search Google Maps for a curry house in my area.
- The map displays with pointers that I can click on to access details about the various restaurants; a list of those restaurants is displayed on the left-hand side of the map. (Usually, this is where the user interaction stops—I’d make a note of the restaurant details before phoning to book a table.)
- The Operator extension alerts the presence of Microformats: it enables one of the toolbar icons (which were previously grayed out).
- Clicking on the highlighted icon displays the list of curry houses that were found. You can then export the details for each of them individually—or all of the restaurants at once—to your computer’s address book.
- If your mobile phone is paired with your computer via Bluetooth—a service that many people use, in order to keep their contacts and calendars synchronized—you can very quickly put all those contacts onto your mobile phone.
I stepped through this process for the purposes of a demonstration a short while ago (it’s available for viewing online), and found that it was possible to search for the establishments and save all their telephone numbers and addresses to my phone in under 60 seconds. In future, I will never be short of a curry house should I find myself in a sudden need of a Chicken Tikka Masala but without access to a telephone book or the Internet—and I can thank Microformats for making that possible!
One other tool that’s well worth a mention at this point is Optimus, which isn’t a browser extension, but a web-based service. It provides a mechanism by which you can transform content that’s been marked up as a Microformat into another format—currently a choice of XML or JSON. It would be an simple job to add a link into a section of a web page that’s used site-wide (such as a header or footer include file), and thereby provide alternative formats for all your Microformatted content within moments. As the cheesey line on the Optimus web site says: “Now your web site could really be your API with goodness of Microformats and power of Optimus.”
The speed with which Microformats are now appearing means that it’s not possible to cover them all here—by the time this reference is published, the list may well have grown. However, it’s worth taking a look at some specific Microformats. Not surprisingly, these are the ones that have been around the longest, and as they were the first to be defined, you can infer from that that they’re also the most useful. For a complete list of Microformats, go to microformats.org/wiki/. If you’d like to get involved in the discussions, and help in the creation of new Microformats, you can join the mailing list at http://microformats.org/discuss.
The Microformats covered in this reference are:
In this Section
- Thu, 04 Feb 2010 00:10:28 GMT
- This note has not yet been confirmed for accuracy and relevance.
Regarding "Woah" think about cowboys in old westerns stopping a horse. As in
"Woah there Nellie, you don't want to go throwin' a shoe."
The phrase "go to woah" means from start to stop, i.e. the whole journey.
- Wed, 03 Feb 2010 23:28:29 GMT
To Mr_Know_It_All ... I have no idea! I honestly don't recall ever hearing that expression before or writing it. It may have been changed during editing process. I'll agree that it reads a bit odd. I'll draw this attention to SitePoint bods and see if anyone wants to change it (or tellme/us that this is a common expression and it's just us two who think it's odd). Alternatively, I really did write this and what we have here is the earlier onset of Alzheimers. I'm sure hoping that's not the case!
- Fri, 22 Jan 2010 01:49:22 GMT
What is "woah" (3rd paragraph above)?