Extending hCard using RDFa

Mark Birbeck the Designer of RDFa has recently posted a couple of really good articles recently one about the first steps in adding Foaf to RDFa and a second one about using RDFa and Microformats. Both these articles has inspired me to write a little introduction about how to use the hcard microformat and extend it using RDFa.

I am going to mark up this example of a hCard as RDFa:

<div class="vcard" id="weborganics">
<p><span class="fn">Martin McEvoy</span></p>
<p><img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"></p>
<p>Contact: <a title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>
<div class="geo">
        <abbr title="53.7552" class="latitude">N 53.7552</abbr>,
        <abbr title="-2.3675" class="longitude">W -2.3675</abbr>
</div>
</div>

I have included the geo part of hcard because its useful for people, clients, or customers to know where you are yes?

First add the RDFa document type to your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

So far so good your page is now RDFa and you are ready to add some namespaces, a namespace is just a place where a set of names and definitions is stored.

I am going to use two namespaces in this example:

1. Foaf, xmlns:foaf="http://xmlns.com/foaf/0.1/"
Foaf Is primaraly used to define People, FOAF documents are machine-readable home pages.
2. Geo, xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
Geo Is the RDF equivalent of the World Geodetic System or WGS84 and is used to represent Latitude/Longitude information about the location of things.

There are two ways to add a namespace in RDFa one is In the <html> tag of your page or another way is in the page using say a <div> or a <span> I am going to add the namespace to the hcard markup itself:

<div class="vcard" id="weborganics"
                xmlns:foaf="http://xmlns.com/foaf/0.1/" 
                typeof="foaf:Person" 
                about="#weborganics">

@typeof is similar to a html <div> it describes a block of some thing, in this case Its a block of foaf:Person. @about means exactly as it says what this thing is about in this case Its about the foaf:Person weborganics.

Lets add a Name to this person:

<p><span property="foaf:name" class="fn">Martin McEvoy</span></p>

Easy eh?, Properties are use to add information about the subject, in this case a person, the contents are usually just text.

Next you may want to add your picture:

<p rel="foaf:img">
<img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"/>
</p>

@rel is used in the same way as a html rel to describe the relationships between things. The above example has a relationship of a foaf:img of the foaf:Person. In RDFa you can use @rel anywhere in your page not just in links, you may also want to add your email address and homepage url in the same way:

<p>Contact: <a rel="foaf:mbox" title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="foaf:weblog me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>

You can leave it there if you wanted which is great! but I am going to take this a little further and demonstrate how you can mark up the Geo bit of a hcard. All in one go this time using the same techniques as demonstrated above:

<div class="geo" id="weblog" rel="foaf:based_near"
        xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
        <span typeof="geo:Point" about="#weblog">
                <abbr property="geo:lat" content="53.7552" title="53.7552" class="latitude">N 53.7552</abbr>, 
                <abbr property="geo:long" content="-2.3675" title="-2.3675" class="longitude">W -2.3675</abbr>
        </span>
</div>

There Is one thing extra I have added I have used @content this works in the same way as the @title attribute in the abbr design pattern, Its used to carry machine readable data without it interfering with the human content, If you think about that from an accessible point of view its actually better than the current abbr design pattern.

So there you have it a hCard marked up as RDFa in a few easy steps. I have created two examples to accompany this mini how-to. which you can simply just copy and paste with your own details.

A Page marked up in just hcard
A Page marked up as a hCard+RDFa
The RDF output of hCard+RDFa

Microformats and RDFa work pretty well together I think, It adds Scope when previously there wasn't any, Microformats also make excellent building blocks for RDFa they give you hints on where everything should go. Thanks.

The Web, Naturally!

Comments on Extending hCard using RDFa