Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Microformats: The Fine Art of Markup: hCard

Last updated Oct 17, 2003.

By Andy Clarke

In this second article in my series on microformats, I will be discussing the hCard microformat from a content-out perspective, and styling minimal markup with CSS for dramatic results.

The creators of HTML and XHTML markup always intended it to be used for adding both structure and rich meaning to content published on the web. When you use markup’s elements and attributes appropriately—for their rich semantics rather than for their visual appearance—that is precisely what it does.

The trouble is that only around 40 elements exist for you to describe the meaning of your content: headings <hx>, paragraphs <p>, and tables <table> are of little trouble; after all, that's what most of the big-brained academics who invented the web needed to describe. But on today’s web, those 40 elements and their associated attributes are simply not enough.

On today’s web, with our need to describe a book title, its description or a review; a conference calendar packed full of speakers, sessions and location information, or even the simple contact information for an individual or organization, the markup elements that you need to use to describe that content meaningfully simply do not exist. By using microformats, you both extend XHTML to deliver more precise meaning and give yourself a greater opportunity to style your meaningful content using CSS.

hCard Design Pattern

If you've already read a little about microformats, on blogs or in articles by microformats enthusiasts Brian Suda and Jeremy Keith (or perhaps you've already bought and read John Allsop’s definitive Microformats: Empowering Your Markup for Web 2.0, published by Friends Of Ed.), you should be familiar with some of the markup design patterns for microformats that are currently in common use.

As you'll be working with the hCard contact information microformat in this example, start by heading over to the hCard Creator, a handy tool designed to generate a design pattern of markup that you will often see used in hCard.

Throughout this series of articles, I'll be using examples from a new site for a fictitious ska band, The Nonsense Robots, comprising a few famous web design faces (and mine). This is the hCard Creator’s output for the contact information of my good friend Colly Wobbles.

<div id="hcard-Colly-Wobbles" class="vcard">

<a class="url fn" href="http://stuffandnonsenserecords.com">
Colly Wobbles</a>
<div class="org">Stuff and Nonsense Records</div>
<a class="email" href="mailto:colly@stuffandnonsenserecords.com">

colly@stuffandnonsenserecords.com</a>
<div class="adr">
<span class="locality">Gwaenysgor</span>, 
<span class="region">Flintshire</span>, 
<span class="postal-code">LL18 6EP</span>

<span class="country-name">UK</span>
</div>

It's important to remember that hCard contact information need not always be constructed this way. Instead, you can construct it using markup elements that are appropriate to the context of the content you're publishing. Take this example from the introduction on the biographies page of The Nonsense Robots web site. Read through it carefully and see how many hCard elements you can spot.

"Formed in 2008 by UK-based keyboard player Malarkey (Andy Clarke), The Nonsense Robots play stomping ska at its finest. Playing both original tunes and a selection of classic covers from some of ska’s greatest songwriters, including Baba Brooks, Desmond Dekker, Lord Tanamo and The Ethiopians. These rude boys and girl know how to stomp."

You should have spotted:

A country name

A nickname

A full name

An organization (the band)

A URL

This information can be encoded in hCard:

<p class="vcard">Formed in 2008 by <span class="adr">
<abbr class="country-name" title="United Kingdom">UK</abbr></span> 

based keyboard player <span class="nickname">Malarkey</span> 
(<span class="fn">Andy Clarke</span>), 
<a href="http://www.stuffandnonsenserecords.com" 
class="url org">The Nonsense Robots</a> 

play stomping ska at its finest. Playing both original tunes and a 
selection of classic covers from some of ska’s greatest song writers, 
including Baba Brooks, Desmond Dekker, Lord Tanamo and The Ethiopians. 
These rude boys and girl know how to stomp.</p>

I could even go a little further and add my role as the band's (two-fingered) keyboard player.

<span class="role">keyboard player</span>

The beauty here is that not only are you using elements and attributes appropriately to describe the rich content, but you're also embedding hooks onto which you can implement your visual design using CSS.

The Nonsense Robots

For this article, using the content-out approach, you're going to take the most minimal, yet semantically rich markup, and transform it into a dynamic page layout for The Nonsense Robots' biographies page. Let’s start by taking a look at the final result.

Figure 1

Figure 1. The final The Nonsense Robots result. Design copyright Andy Clarke.

If you were thinking presentationally, you might assume that you'd need four divisions <div> to accomplish this four-column layout. But look again and ask yourself what you see. Is it a list of band members? Are those band members listed in any particular order? What does each band member’s information contain?

Name

Description

Photo

Contact information

By thinking from the content-out, you should see that the most appropriate element(s) for this list of band members is not four divisions, but a single, simple unordered list—so start by creating that list. And since you already know that individual list items will contain contact information, you should go ahead and add the class="vcard" to each one. A unique id will add additional semantic weight to each list item and make the CSS that you're about to be working with possible.

<ul>
<li id="colly" class="vcard"></li>
<li id="dan" class="vcard"></li>
<li id="jina" class="vcard"></li>

<li id="malarkey" class="vcard"></li>
</ul>

Now, turn your attention to the contents of each list item. Add each of the elements in turn, together with their microformat attributes and values.

<li id="colly" class="vcard">

<h3><span class="fn">Colly Wobbles</span></h3>
<a href="#colly"><img src="colly.jpg" alt="Colly" class="photo" /></a>

<p class="summary">...</p>

<ul>
<li><a href="#">More about Colly Wobbles</a></li>
<li><a href="http://www.colly.com">Blog</a></li>

</ul>

<div>
<h3>Contact Colly Wobbles</h3>
<span class="org">Stuff and Nonsense Records</span>
<span class="adr">

<span class="locality">Gwaenysgor, </span>
<span class="region">Flintshire, </span>
<span class="postal-code">LL18 6EP</span>
</span>

<a class="tel" href="callto:441745851848">+44 (0)1745 851848</a>
<a class="email" href="mailto:colly@stuffandnonsenserecords.com">
Email colly</a>

</div>
</li>

You should repeat this format for each of the members of The Nonsense Robots, Dan C Da Man, Jina Bee, and Malarkey. With your microformat embedded mark-up now complete, you can turn your attention to implementing the visual design using CSS.

Stying The Contact Information

Implementing this design from such minimal markup is made possible by using CSS positioning techniques. If you need to brush up on your positioning knowledge, why not take this opportunity to look back through my last series of Creating Inspired Design articles, where I discussed positioning extensively.

First, apply position : relative; to the unordered list to establish that element as a positioning context for all of its positioned children; in this example, the large photographs and the contact information divisions.

#content ul { position : relative; }

With the unordered list established as the positioning context, add basic styling to the list items to fix their width and add a little typographical style.

.vcard { 
width : 255px; 
margin-bottom : 15px; 
padding-bottom : 15px; 
border-bottom : 1px solid #91898a; }

.vcard:last-child { 
border-bottom-width : 0; }

.vcard h3 { 
font-size : 102%; 
font-weight : bold; }

.vcard > h3 { 
width : 60%; 
font-size : 160%; 
padding-bottom : 0; 
border-bottom : 1px solid #91898a; }

.vcard p { font-weight : bold; }

.vcard ul li { 
display : inline; 
padding : 0 10px; 
border-right : 1px solid #231018; }

.vcard ul li:first-child { padding-left : 0; }

.vcard ul li:last-child { 
padding-right : 0; 
border-right-width : 0; }

With your basic styling now in place, it's time for you to put CSS absolute positioning to work, first by applying a general rule that will apply absolute positioning to all images with a class of photo:

.photo { 
position : absolute; }

Followed by specific positioning coordinates for each individual photo:

#colly .photo { top : 100px; left : 275px; }
#dan .photo { top : 100px; left : 474px; }
#jina .photo { top : 0; left : 673px; }
#malarkey .photo { top : 460px; left : 673px; }

As you know that each of the photos is a fixed height, you can put that knowledge to good use to enable you to absolutely position the divisions that contain each band member’s contact information.

.vcard div { 
position : absolute; 
width : 190px; 
font-size : 92%; }

#colly div { 
top : 645px; 
left : 275px; }

#dan div { 
top : 485px; 
left : 490px; }

#jina div { 
top : 205px; 
left : 690px; }

#malarkey div { 
top : 645px; 
left : 673px; }

With the structure of your stylish biographies page largely complete, all that remains is to add some small touches, such as adding telephone and email icons next to their link text.

.locality, .tel, .email { 
display : block; 
min-height : 14px; }

a.tel { 
padding : 0 0 2px 25px; 
background : url(vcard_tel.png) no-repeat 0 50%; } 

a.email { 
padding-left : 25px; 
background : url(vcard_email.png) no-repeat 0 50%; }

Stying Beyond the Browser Window

Designing for microformats does not stop at the browser window, but can also extend to how the information looks to the user once it has been exported to other applications. For this hCard example, I would like a logo image of each of the band members to be available when their contact information is exported and viewed in an address book. To achieve this, add the logo image to your markup.

<li id="colly" class="vcard">

<h3><span class="fn">Colly Wobbles</span></h3>
<a href="#colly"><img src="colly.jpg" alt="Colly" class="photo" /></a>

<img src="logo_colly.png" alt="" class="logo" />
<p class="summary">...</p>

Combine your use of CSS positioning with a little creative floating and the logo image will not only look great in an address book, but also in the browser.

.logo { 
float : left; 
margin : 15px 10px 0 0; }
Figure 2

Figure 2. The final The Nonsense Robot biographies page with hcard markup and CSS styling. Design copyright Andy Clarke.

I hope that I've demonstrated that by adding precise meaning to the content that you mark-up using HTML and XHTML and microformats, you not only empower the visitors who come to your site to do more with your content, but you also give yourself the ability to style this highly rich and meaningful content using CSS.