HyperWrite - Consultancy and Training 

Help Systems, Structured Authoring, DITA, Hypertext, Documentation Technologies

HyperWrite Logo
Skip Navigation LinksHome > Articles > This Article
Skip Navigation Links

Web "Microformats"

By Tony  Self

Microformats Defined

Microformats is a term used to describe the storage of information using simple markup variations within existing markup languages. To a certain extent, microformats describes a methodology or philosophy, and comprises a set of design principles. Microformats is not a new language. It is usually a permutation of XHTML.

The philosophy of microformats involves storing data in human-readable formats which are also machine-readable, but the emphasis is on the humans! Information tends to be visible, rather than hidden metadata.

A Typical Microformat - hCard

hCard is a microformat for storing contact information for people. Its purpose is similar to that of Virtual Card (vCard) that users of Outlook might be familiar with. The vCard format stores contact information suitable for attachment to e-mails in MIME format. Here's what one looks like.

BEGIN:VCARD
VERSION:3.0
N:Self, Tony
FN:Tony Self
TEL;WORK;VOICE:+61 3 9803 8291
EMAIL;PREF;INTERNET:tony.self@hyperwrite.com
ORG:HyperWrite Pty Ltd
END:VCARD

Although you can probably work out the format of the vCard data, it's not easy to read, and it's not as simple as it could be. By comparison, the hCard microformat would store this data in XHTML, using the class attribute not to store style information, but to denote the nature of the information (what would be called the field name in a database application).

The same information presented in hCard format would look like the following.

<div class="vcard">
<span class="fn">Tony Self</span>
<span class="n">
 <span class="given-name">Tony</span>
 <span class="family-name">Self</span>
</span>
<span class="tel">
 <span class="value">+61 3 9803 8291</span>
 <abbr class="type" title="work">business</abbr>
</span>
 <span class="org">HyperWrite Pty Ltd</span>
</div>

Snippets of hCard contact information can easily be embedded easily within other documents. For example, if you were writing a report on a meeting, and were listing the people who attended the meeting in a Web report, you could code the information as in the following example.

<h1>Minutes of Team Meeting 31 Dec</h1>
<p>The meeting was called to...</p>
<h2>Present</h2>
<ul>
<li><a class="email fn" href="mailto:gary@example.com">Gary Kilsen</a></li>
<li><a class="email fn" href="mailto:mary@example.com">Mary Chia</a></li>
<li><a class="email fn" href="mailto:tan@example.com">Tan Alberres</a></li>
</ul>

With judicious use of stylesheets, this content can look and read well, while storing the contact elements of the contact information in an unobtrusive, semantic format.

Screen capture showing Microformats rendered normally within Web page
Screen capture showing Microformats rendered normally within Web page

But microformats aren't just a clever standard for storing particular bits of information. Like all standards, microformats become really useful when a software application can use the semantic tagging to process and manipulate the information. Such an application is a clever Web utility written by Brian Suda, at suda.co.uk. It parses an Web page to extract hCard or hCalendar (another microformat) information from the HTML, and converts it to vCard or Internet Calendar (iCalendar) files ready to add to organiser software such as Outlook.

You can add a link from a Web page with embedded hCard or hCalendar information to Suda's conversion scripts, using the syntax: javascript:location.href='http://suda.co.uk/proj/X2V/get-vcard.php?uri='+escape(location.href) or javascript:location.href='http://suda.co.uk/proj/X2V/get-vcal.php?uri='+escape(location.href)

To see this idea in action, view the code of the hCard Example page.

Microformat Formats

The microformats currently in circulation include:

  • hCard (contact information)
  • hCalendar (calendar information)
  • rel-license (links to content licence information)
  • rel-nofollow (for indicating that links should not be weighted by search engines)
  • rel-tag (for adding keywords to content)
  • VoteLinks (for storing simple voting or poll options within links)
  • XHTML Friends Network (representing human relationships)
  • XMDP (for storing metadata profiles)

Microformats may be ultimately superseded by full-blooded semantic XML, but until then, the concept has some useful low-impact application within generic Web pages, to add useful functionality to those documents.

Further Reading:

Bookmark and Share

Created with DocBook


Valid XHTML 1.0 Transitional Valid CSS!

Training

HyperWrite provides training in a number of authoring software tools, and in structured authoring, technical writing and Help authoring techniques. Find out more...