Use µ- to Identify Microformats

I’m a fan of microformats. I think using microformats is one of the best, unobtrusive techniques we can use to make the web more practical. Typography, layout, design are all so overloaded and applying a microformat is a quiet way of distinguishing between, say, this centered block of three short lines of text that’s an address from that centered block of three short lines of text that’s a haiku.

When Google launched their recipe view it meant that some part of the long-held dream that semantic markup would help guide us though the jungles of web content was finally being realized. More recently Foursquare started requiring hCard markup for websites that want to employ a “Save to Foursquare” button (you can also use Facebook’s OpenGraph, but don’t do that). This makes sense for them since it ensures an automated way for them to harvest location data, but it’s a bit of good citizenship, too, since that data is open and available to anyone. I have a nice little Michromeformats extension installed in Chrome that alerts me whenever I’m looking at a webpage containing one of the microformats it knows about (hCard, hCalendar, hReview, hRecipes, geo) When this pops up I can click on it to see what’s there.

Michromeformat displaying hCard on the Guggenheim website

That’s great for the five microformats that this extension can handle, but what about the rest? How would you even be able to identify a microformat without knowing about it already? Since microformats just use classes applied to HTML elements, how are you supposed to know that <span class="region"> is an hCard field rather than something that a web designer just used to identify a region of the screen?

I’m working on the Guggenheim’s Collection Online and wondering if we don’t want to come up with a microformat for works of art or museum objects in general. This is probably a hopeless task and one that’s been considered before, but why worry about that? What we need is a simple way to flag markup as belonging to a microformat so that it can be recognized without any prior knowledge. Here’s my suggestion:


Just as you add classes to markup for a microformat, you can add this prefix to the main class to indicate that the class does belong to a microformat. Call it an µ-class (perhaps this reeks of Hungarian notation, but the web is certainly “untyped”). Note that this is a Unicode micro sign (U+00B5) not a Greek small letter mu (U+03BC). In some fonts they look identical, in some the micro sign looks italicized. Almost all Unicode characters are valid in a css name, and even if you don’t need the extended character set you should still be be using Unicode. You can escape Unicode characters if you (e.g., 003bc) but there are browser bugs regarding these escape sequences that make straight Unicode much more practical.

If I were to come up with a microformat called cultureObj, say, and use it to mark up a caption for Kandinsky’s Painting with White Border, why not just make the class that identifies it µ-cultureObj (NB, no actual thought when into this markup, it’s just for the sake of an example):

<div class="µ-cultureObj">
  <span class="objnames">
    <span class="objname lang-en">Painting with White Border</span>
    (<span class="objname lang-de">Bild mit weißem Rand</span>)
  <span class="objdate" title="1913-05">May 1913</span>.
  <span class="material">Oil on canvas</span>,
  <span class="dims">
    <span class="dims dim-standard">55 1/4 x 78 7/8 inches</span>
    (<span class="dim dim-metric">140.3 x 200.3 cm</span>)
  <span class="credit">Solomon R. Guggenheim Museum, New York,Solomon R. Guggenheim Founding Collection, By gift</span>
  <span class="objid">37.245</span>.
  <span class="copyright" title="2009">© 2009 Artists Rights Society (ARS), New York/ADAGP, Paris</span>.

For an already prevalent microformat, you might need to double the class. For this hCalendar snippet, the format is identified by vevent and µ-vevent is added for the sake of discoverability (a small price):

<div class="vevent µ-vevent"><a class="url" href="">

 <span class="summary">Web 2.0 Conference</span>:
 <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
 <abbr class="dtend" title="2005-10-07">7</abbr>, at the
 <span class="location">Argent Hotel, San Francisco, CA</span>

Discoverability is important. If you knew nothing else, you would know that these two blocks were marked up according to some criteria. You would also know to at least search for “cultureObj” and “vevent” to see what you could find.

A lot of markup, especially that generated dynamically using data coming from databases, already amounts to a kind of microformat-in-waiting. This µ- prefix then serves as a proposal. It indicates that you think the markup you’ve adopted could serve a more general purpose. If, for example, you were looking for examples of how museums formatted works of art, and if museums used µ-classes to identify their ad-hoc microformats, instead of wearing out your eyes perusing a vast number of museum websites you could just spider those websites looking for µ-classes. It then becomes easier to know when enough people are using a particular format to think about formalizing it, or when there are enough different formats in use in a particular domain to think about reconciling them and developing a single standard.

(Photo: Berri by Nesster)

About these ads

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s