Web Design & Development Guide

Microformat

Home
Up

Microformat logo

In web development, a microformat (sometimes abbreviated μF or uF) is a way of adding simple semantic meaning to human-readable content which is otherwise, from a machine's point of view, just plain text. They allow data items such as events, contact details or locations, on HTML (or XHTML) web pages, to be meaningfully detected and the information in them to be extracted by software, and indexed, searched for, saved or cross-referenced, so that it can be reused or combined.

More technically, they are items of semantic mark up, using just standard (X)HTML with a set of common class-names. They are open and available, freely, for anyone to use.

Current microformats allow the encoding and extraction of events, contact information, social relationships, and so on. More are being developed. Version 3 of the Firefox browser[1], as well as version 8 of Internet Explorer^[2] are expected to include native support for microformats.

Principles

(X)HTML standards allow for semantics to be embedded and encoded within them. This is done using specific HTML attributes:

• class
• rel
• rev

For example, 52.48,-1.89 is a pair of numbers which may be understood, from their context, to be a set of geographic coordinates. By wrapping them in spans (or other HTML elements) with specific class names (in this case part of the geo microformat specification):

 <span class="geo"><span class="latitude">52.48</span>, <span class="longitude">-1.89</span></span>

machines can be told exactly what each value represents, and can then index it, look it up on a map, export it to a GPS device, etc.

Example

Consider the contact information:

 <div>
   <div>Joe Doe</div>
   <div>The Example Company</div>
   <div>604-555-1234</div>
   <a href="http://example.com/">http://example.com/</a>
 </div>

With hCard microformat markup, that becomes:

 <div class="vcard">
   <div class="fn">Joe Doe</div>
   <div class="org">The Example Company</div>
   <div class="tel">604-555-1234</div>
   <a class="url" href="http://example.com/">http://example.com/</a>
 </div>

Here the formal name (fn), organisation (org), telephone number (tel) and url have been identified using specific class names; and the whole thing is wrapped in class="vcard", (see vCard) which indicates that the other classes form a vcard, and are not just coincidentally named. Other, optional, hCard classes also exist.

It is now possible for software, for example browser plug-ins, to extract the information, and transfer it to other applications, such as an address book.

Live example

For a live example of microformats on Wikipedia pages, see HCard#Live example

Accessibility of Microformats

Because some microformats make use of the abbr html element in the "abbr design pattern" to conceal machine-only data in the expansion of the abbreviation, the data is inaccessible to some screenreaders that expand abbreviations. This is particularly the case with date-time and geographical data. See the Web Standards Project's Accessibility Task Force article "hAccessibility".

Specific microformats

Several microformats have been developed to enable semantic markup of particular types of information.

• hAtom (hAtom spec) - for marking up Atom feeds from within standard HTML
• hCalendar (hCalendar spec) - for events
• hCard (hCard spec) - for contact information; includes:
  • adr (adr spec) - for postal addresses
  • geo (geo spec) - for geographical coordinates (latitude;longitude)
• hReview (hReview spec) - for reviews
• hResume (hResume spec) - for resumes or CVs
• rel-directory (rel-directory spec) - for distributed directory creation and inclusion
• rel-nofollow, an attempt to discourage 3rd party content spam (e.g. Spam in blogs).
• rel-tag (rel-tag spec) - for decentralized tagging (Folksonomy)
• xFolk (xFolk spec) - for tagged links
• XFN - for social relationships
• XOXO - for lists and outlines

Proposed microformats

Among the many proposed microformats^[3], the following are undergoing active development:

• citation - for citing references^[4]
• currency - for amounts of money^[5]
• Geo extension - for places on Mars, The Moon, and other such bodies
• species - For the names of living things.

Uses of microformats

Using microformats within HTML code provides additional formatting and semantic data that can be used by applications. These could be applications that collect data about on-line resources, such as web crawlers, or desktop applications such as e-mail clients or scheduling software.

Several browser extensions, such as Operator, provide the ability to detect microformats within an HTML document and export them into formats compatible with contact management and calendar utilities, such as Microsoft Outlook.

Microsoft expressed a desire to incorporate Microformats into upcoming projects^[6]; as have other software companies.

In Wikipedia - and more generally in MediaWiki - microformats are used as part of templates like {{coord}} for example.

Creation of microformats

Most of the existing microformats were created at the microformat wiki and associated mailing list, by a process of gathering examples of web publishing behaviour, then codifying it. Some other microformats (such as rel=nofollow and unAPI have been proposed, or developed, elsewhere.

Critique of microformats

Commentators have offered various critiques of microformats, suggesting viewpoints where they are both potentially favorable and potentially unfavorable.^[7]

Favorable aspects

• Microformats are designed for usability and backward-compatibility.
• An alternative approach, using XML (for semantics) plus CSS (for presentation), is not as flexible with older web browsers.^[8]
• Microformats are no more subject to abuse and spam than any other similar proposal for data normalization.

Unfavorable aspects

• Microformats present an undesirable mixing of data-layer with presentation-layer. ^[9]
• Accessibility is hindered by the use of abbr. ^[10]
• The use of CSS class names to specify the semantics of markup is sub-optimal, and would be better expressed as XML elements.^[11][8]
• Microformats present yet another medium for abuse and spam within HTML markup.

References

Further reading

• Allsopp, John (2007). Microformats: Empowering Your Markup for Web 2.0. Friends of ED. ISBN 978-1-59059-814-6. 
• Orchard, Leslie M. (2005). Hacking RSS and Atom. Wiley. ISBN 978-0-7645-9758-9. 
• Robbins, Jennifer Niederst (2006). Web Design In A Nutshell, Third Edition, O'Reilly Media. ISBN 978-0-596-00987-8. 
• Suda, Brian (2006). Using Microformats. O'Reilly Media. ISBN 978-0-596-52817-1. 
• Haine, Paul (2006). HTML Mastery. Friends of ED, pp. 117-154. ISBN 978-1-59059-765-1. 

External links

• microformats.org
• Microformats Primer
• A four-part discussion of Microformats, UI issues, and possible presentation in Firefox 3 by Alex Faaborg of Mozilla
• "hAccessibility" - Web Standards Project discussion of inaccessible microformat design pattern

Home
Up
Cascading Style Sheets
Printer friendly
Brochureware
Digital strategy
DOM scripting
Fahrner Image Replacement
Microformat
Progressive enhancement
Rollover
Spacer GIF
Techniques for creating a User Centered Design
URL redirection
Web Interoperability
Web modeling
Web template
Web-safe fonts
Website architecture
Website wireframe