Using microformats to enhance contact information

As shown in the previous section, user feedback may come in the form of a telephone call
or letter, rather than an e-mail, and therefore you should always add other forms of contact
details to a website—even if the site is an online store, customers will need other ways
to get in touch (faceless multinational organizations, take note). In the most basic sense,
these can be marked up by using some headings and paragraphs, as follows:
<h1>Contact details</h1>
<h2>Mail</h2>
<p><strong>Company name</strong><br />
00, Street Name<br />
Town or City<br />
County or Region<br />
Postal/ZIP code<br />
Country name</p>
<h2>Telephone/fax</h2>
Tel: +1 (0)0000 555555<br />
Fax: +1 (0)0000 555556<br />
Mobile/cell: +1 (0)7000 555555</p>
Now, there’s nothing at all wrong with the previous block of code: it’s valid, it does the job
perfectly well, and it’s semantically sound, which also means it’s easy enough to style using
CSS. However, by utilizing microformats, the page’s functionality can be enhanced without
compromising the markup.
More about microformats can be found at the microformats website at www.
microformats.org, and in the book Microformats: Empowering Your Markup for Web 2.0,
by John Allsopp, so I won’t dwell on them too much. In short, though, microformats provide
a way of adding commonly used semantics to web pages, working with common technologies,
such as XHTML. For the example, you’re going to see how to take a basic set of
contact details and then use microformats to provide users with a means of efficiently
downloading and storing the information as a vCard—the vCard format being that
commonly used by address books). The semantic information is also of use to any other
application that is microformat-aware—for example, some Firefox plug-ins are able to
auto-detect microformat information on any web page and enable a user to browse and
manipulate it.