Custom markup for Microformats

Warning This article was written over six months ago, and may contain outdated information.

A mistake which seems to be fairly common when taking the first steps in learning about Microformats (and one which I have made) is to presume that the markup which is generated by the generation tools – for example, the hCard Creator – is the markup that must be used in the page.

That’s not the case, of course; with a few notable exceptions, the markup is completely customisable, and it is the order of the class names (and other attributes) which matters.

As a quick example, here’s what the hCard Creator outputs (minus the promotional sentence) when I enter my name and email address:

<div id="hcard-Peter-Gasston" class="vcard">
<span class="fn">Peter Gasston</span>
<a class="email" href="mailto:peter@broken-links.com">peter@broken-links.com</a>
</div>

This could just as easily (and correctly) be marked up like this:

<p id="hcard-Peter-Gasston" class="vcard">
<strong class="fn">
<a class="email" href="mailto:peter@broken-links.com">Peter Gasston</a>
</strong>
</p>

Or like this:

<ul id="hcard-Peter-Gasston" class="vcard">
<li><em class="fn">Peter Gasston</em>
 (<a class="email" href="mailto:peter@broken-links.com">email</a>)</li>
</ul>

All the examples conform to the hCard specification, but in each case the markup is customised to better resolve a particular coding requirement.

It’s really worth taking a look through the Microformats Wiki and spending a little time with the specifications in order to see the fundamental requirements of each, and to find out how much leeway you have in marking up your data.

2 comments on
“Custom markup for Microformats”

  1. Hi Peter,

    I’m glad you got it sussed about the flexible mark-up. One of important things about microformats is that in most situations, you can use whatever mark-up you like. The class attribute maps elements to fields, but the type of element is irrelevant.

    There are some optimisation patterns which work off the semantics of some specific elements, but in general, it’s entirely up to the author.

    I think we should do a better job of clarifying that in examples. We use the most generic mark-up available (so as not to give the false impression that you have to use some other element), but don’t want to spread confusion in the other direction.

    It’s on my list of things to improve on the wiki this year.

    Ben Ward [February 5th, 2009, 01:40]

  2. I would like to add custom itemtypes for no of views, now of downloads, filesize, bitrate, etc… how do include those?

    Jayapal Chandran [May 19th, 2013, 22:41]