Custom markup for Microformats

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

A mis¬≠take which seems to be fair¬≠ly com¬≠mon when tak¬≠ing the first steps in learn¬≠ing about Micro¬≠for¬≠mats (and one which I have made) is to pre¬≠sume that the markup which is gen¬≠er¬≠at¬≠ed by the gen¬≠er¬≠a¬≠tion tools ‚Äď for exam¬≠ple, the hCard Cre¬≠ator ‚Äď is the markup that must be used in the page.

That’s not the case, of course; with a few notable excep­tions, the markup is com­plete­ly cus­tomis­able, and it is the order of the class names (and oth­er attrib­ut­es) which matters.

As a quick exam­ple, here’s what the hCard Cre­ator out­puts (minus the pro­mo­tion­al sen­tence) 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 eas¬≠i¬≠ly (and cor¬≠rect¬≠ly) 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 exam¬≠ples con¬≠form to the hCard spec¬≠i¬≠fi¬≠ca¬≠tion, but in each case the markup is cus¬≠tomised to bet¬≠ter resolve a par¬≠tic¬≠u¬≠lar cod¬≠ing requirement. 

It‚Äôs real¬≠ly worth tak¬≠ing a look through the Micro¬≠for¬≠mats Wiki and spend¬≠ing a lit¬≠tle time with the spec¬≠i¬≠fi¬≠ca¬≠tions in order to see the fun¬≠da¬≠men¬≠tal require¬≠ments of each, and to find out how much lee¬≠way you have in mark¬≠ing up your data.

2 comments on
“Custom markup for Microformats”

  1. Hi Peter,

    I’m glad you got it sussed about the flex­i­ble mark-up. One of impor­tant things about micro­for­mats is that in most sit­u­a­tions, you can use what­ev­er mark-up you like. The class attribute maps ele­ments to fields, but the type of ele­ment is irrelevant.

    There are some opti­mi­sa­tion pat­terns which work off the seman­tics of some spe­cif­ic ele­ments, but in gen­er­al, it’s entire­ly up to the author.

    I think we should do a bet­ter job of clar­i­fy­ing that in exam­ples. We use the most gener­ic mark-up avail­able (so as not to give the false impres­sion that you have to use some oth­er ele­ment), but don’t want to spread con­fu­sion in the oth­er direction.

    It‚Äôs on my list of things to improve on the wiki this year.

  2. I would like to add cus­tom item­types for no of views, now of down­loads, file­size, bitrate, etc… how do include those?

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