Examples of Microformats: how to use them

hCard

Introduction

hCard is a microformat based on the existing vCard, and is used for marking-up contact details on web sites.

hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of the properties and values of the vCard standard (RFC2426) in semantic XHTML.

Microformats.org wiki

The benefits of hCard

hCard provides a standard way of making-up contact details, and this can help the usability of your site by making the details easily accessible to visitors.

Users can also add your hCard details to their address books by using an XML parser, which reads the details and converts them to a vCard (using, for example, technorati contact feeds service).

The only drawback I can see is that you may make your details more accessible to spam bots, but any contact details on the web are open to abuse. To help against spam you can munge your email address, making it harder for spam robots to grab your email address (http://perso.crans.org/~raffo/aem/index.php does the trick).

Coding your hCard

hCards can be coded by hand, or you can take the easy route.
The easy way is to use the hCard generator at microformats.org. This automatically generates the hCard from what you input.

Lets dissect the various parts of a hCard, and what you can add to it.

Properties and class names in the hCard

Wrapping it up

"vCard" - This is the root of the hCard, and the element with this class name should contain the entire hCard. You could wrap your hCard in a div with a class of ‘vCard’ for example.

Names

"fn" and "n" - The ‘fn’ and ‘n’ properties define your name/names in the hCard. You use both, or just fn, depending on the format of the name.

The ‘n’ property has sub-properties for marking-up different parts of the name, these sub-properties include:

• given-name
• family-name
• additional-name
• honorific-prefix
• honorific-suffix
• nickname
• sort-string

The ‘fn’ property is the shorthand way of defining ‘n’ for standard names in a standard format. A little confusing…Here are some examples:

Name: Michael Jolley

There are only two names, so I can markup my first and last name using just the ‘fn’ property.

Code:

<span class="fn">Michael Jolley</span>

Name: Jolley, Michael

Again, only two names but the family name is at the front. This is not a problem, as ‘fn’ recognises this and will correctly recognise that the family name is before the comma.

Code:

<span class="fn">Jolley, Michael</span>

Name: Jolley, M OR Jolley M

Same as the previous example, excerpt fn recognises the ‘M’ and the given-name-first-initial.

Code:

<span class="fn">Jolley, M</span>

OR

<span class="fn">Jolley M</span>

Name: Michael Andrew Jolley

This time there are three names present, so the ‘n’ property, and some sub-properties are needed.

Code:

<span class="fn n">
  <span class="given-name">Michael</span>
  <span class="additional-name">Andrew</span>
  <span class="family-name">Jolley</span>
</span>

Lastly, if the contents of ‘fn’ has only 1 word, and their is no explicit ‘n’ property, the name is treated as the nickname e.g

Code:

<span class="fn">Jolley</span>

Organisation

You can define your organisation in the hCard using the ‘org’ property.

Code:

<span class="org">Blue Anvil</span>

If you were making a hCard for your organisation, you could also combine the ‘org’ property with the ‘fn’ property. The following example would make the contact name the same as the organisation name.

Code:

<span class="org fn">Y-Front Inc</span>

Using 1 word inside the ‘org’ property makes it default to the organisation name.
If you want to include the organization-unit you must define the name and unit separate like this:

Code:

<span class="org">
   <span class="organization-name fn">Y-Front Inc</span>,
   <span class="organization-unit">Europe</span>,
</span>

Title

The ‘title’ property is used for defining your title at your organisation.

<span class="title">Managing Director</span>

Role

The ‘role’ property is used for defining your role at your organisation.

<span class="role">Lead Designer</span>

Photo

The ‘photo’ property defines your photo if you want to include it in your hCard. You may have noticed my hCard, in Tails, shows my picture, yet on the page it is not visible. That is because I chose to hide it with css, so it would only show when opened in tails. I used this code:

<img src="http://www.blue-anvil.com/mikejolley.gif" class="photo" alt="Mike Jolleys Photo" style="display:none;" />

Address

Address can be marked-up in hCard using the ‘adr’ property. The class names are pretty self explanatory, as demonstrated in the following example:

<div class="adr">
  <div class="street-address">27 Wiggly point</div>
  <span class="locality">Townsville</span>
,
  <span class="region">North Pole</span>
,
  <span class="postal-code">PR34 1P2</span>

  <span class="country-name">Antarctica</span>

 </div>

Which outputs as:

Email Addresses

You can markup your email address using the ‘email’ class in the anchor tag of your email link.

<a class="email" href="mailto:mine@myemail.com">My email address</a>

You can also set an email address as ‘pref’ for your preferred email address.

<a class="email" href="mailto:jane_doe@abc.com">
 <abbr class="type" title="pref">preferred</abbr>
 email for jane_doe
</a>

example taken from hCard wiki.

You could even combine email with other parts of the hCard, consider the earlier example:

Code:

<span class="org fn">Blue Anvil</span>

We could add an email address to this also for the organisation, like this:

Code:

<span class="org fn"><a class="email" href="mailto:Y@y-front.com">Y-Front Inc.</a></span>

Combining the properties

By combining all the properties, you can make your hCard. The following example is a organisation hCard for a fictitious company called Y-front. In this example I have also used a couple of properties not shown above (tel - telephone, logo - company logo, url - url of the website) to demonstrate some of the other properties.

<div class="vCard">
   <h2 class="org"><a class="url fn" href="http://www.Y-Front.com">Y-Front Inc</a></h2>
   <img class="logo" src="http://www.blue-anvil.com/tuts/yfront.gif" alt="Y-Font inc logo logo" />
   <p><a class="email" href="mailto:enquire@Y-Front.com">Email us</a></p>
   <div class="adr">
      <div class="street-address">27 Wiggly point</div>
      <span class="locality">Townsville</span>,
      <span class="region">North Pole</span>,
      <span class="postal-code">PR34 1P2</span>
      <span class="country-name">Antarctica</span>
   </div>
   <div class="tel">01445 233444</div>
</div>

This outputs as:

By adding a little CSS styling:

.vCard{
	border:3px double #ddd;
	background:#fff;
	width:25em;
	padding:1em;
}
.vCard img{
	float:right;margin:0.1em;
}
.vCard h2{
color:#4488cc;
margin-bottom:0.1em;
font-size:2.5em;
}
.vcard .adr{
	font-size:1.2em;
	color:#444;
	font-weight:bold;
}

We get this:

As you can see, this makes non-hcard contact details look pants!!! Ok not funny…

Other properties

Still want more? There are many properties and uses of hCards so I recommend you read the hCard wiki to find other properties you can utilise.

Making the hCard use natural language

On my web page, I always used a small bit of text in the sidebar describing me and the site. It also had my contact links. After reading an article at adactio, I decided to make use of a hCard in the text that was already there:

About this site

Blue Anvil is the online web design journal & portfolio of Mike Jolley, a web designer from Norfolk, England.

There was also a link to contact me underneath this short piece of text.

Looking at the text, some things stand out that could be made into a microformat, the site name (URL, organization), my name (name, email), my job (title), and where im from (GEO/Location perimeter). Using the same text I converted it to a hCard, also adding a picture of me and some additional info. I also made my real name hidden (Michael Jolley) since I prefer Mike Jolley, and I munged my email address to protect from spammers. This is what I ended up with:

<address class="vCard"><p>
<img src="http://www.blue-anvil.com/mikejolley.gif" class="photo" alt="Mike Jolleys Photo" style="display:none;" />
<a href="http://www.blue-anvil.com" class="url org" rel="me">Blue Anvil</a> is the online web design journal &amp; portfolio of
<span class="fn" style="display:none;">Michael Jolley</span><a href="mailto:&#106;&#111;&#108;&#108;&#101;&#121;&#46;&#115;&#109;&#97;&#108;&#108;&#64;&#103;&#111;&#111;&#103;&#108;&#101;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;" class="email"><span class="given-name">Mike</span> <span class="family-name nickname">Jolley</span></a>, a
<span class="title">web designer</span>
from <span class="adr"><a href="http://maps.google.com/maps? f=q&amp;hl=en&amp;q=Kings+Lynn, +PE30, +UK+(pe30) &amp;ie=UTF8 &amp;z=14 &amp;om=1 &amp;iwloc=A">
			<span class="region">Norfolk</span>, <span class="country-name">England</span></a></span>.
</p></address>

You can see this hCard in the sidebar of this site. Why not try making your own?

On the next page we look at the microformat hAtom.

Page: 1 2 3

Related Entries

• Guide to Semantic Mark-up
• Wordpress development techniques #2 - Fetching RSS feeds with wordpress
• Wordpress development techniques #1 - Running custom queries using the ‘wpdb’ class
• Using Image replacement techniques
• Setting your own standards; Keeping your mark-up consistent

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Back with a New look