A Blog Not Limited

to web design, standards & semantics

Getting Semantic With Microformats, Part 1: rel

Sep 09, 2008

Published in

Microformats

As I mentioned in the introduction to this series, I'm a freak for microformats.

I love the semantics, the structure, the simplicity and the potential. I decided I must share this love with the world (or at least my four readers) by detailing how I've used various microformats on A Blog Not Limited.

This first installment of the series focuses on microformats for link-based relationships using the rel attribute. Let's get started, shall we?

Link-Based Relationships

The rel attribute is used to describe the relationship of a link in terms of what the destination (href) is to the source. Most folks are probably quite familiar with this attribute as used with linked CSS:

<link rel="stylesheet" type="text/css" media="screen" href="/http://ablognotlimited.com/styles/main.css" />

Additionally, multiple rel values may be used in the markup, just as multiple class values are permitted.

Show Me the Way Home

The rel-home microformat indicates that the destination of a link is the homepage of the site. It is primarily used for site navigation purposes, but also for providing some description of site structure to individual pages.

Note: rel-home is a draft specification, which essentially means it is subject to change. But, since change is the nature of web technologies, it isn't something with which I'm particularly concerned.

Now, back to regular programming … I use the rel-home microformat in two ways. In the <head> of my XHTML, I added:

<link rel="home" href="http://www.ablognotlimited.com/" title="Home page" />

Also, any links (in the navigation, as well as in the content) to the home page of A Blog Not Limited are assigned rel="home":

<a href="http://www.ablognotlimited.com" rel="home">A Blog Not Limited</a>

The Benefits

Other than semantics and meaning (which is more than enough for me), Opera recognizes the rel-home microformat when used in the <link> of a document <head>. The browser features a Navigation Toolbar that, when enabled, allows users to navigate to the home page:

Opera Navigation Toolbar

Also, according to Mark Pilgrim's Dive Into Accessibility, rel-home provides increased accessibility with navigational aids for text-mode browsers, such as Links and Lynx.

Finally, rel-home is recognized by the cmSiteNavigation Toolbar Firefox add-on, which displays the related web pages of the current web page in a toolbar to aid navigation. At present, this extension is only available for FF 1.5–2.0. And since I'm using FF 3.0, I can't provide you a screenshot of this tool.

Me, Myself & I

Also, since this blog is my blog and multiple values can be used, any links to the home page are also assigned rel="me":

<a href="http://www.ablognotlimited.com" rel="home me">A Blog Not Limited</a>

According to the specification, rel="me" is used on hyperlinks from one page about a person to other pages about that same person.

With this in mind, I also added rel="me" to links to my social media sites (i.e. Flickr, Facebook, Twitter, etc.):

<a href="http://twitter.com/emilylewis" rel="me">Twitter</a>

The Benefits

Again, the semantics are more than enough for me, but there are emerging benefits to using rel-me, primarily in relation to the XFN microformat.

XFN is a microformat that depicts social relationships (i.e., friends, family, co-workers, etc.). Using XFN, Google is developing the Social Graph API to help make the web more social and easier to find friends in new places on the web.

Also, there are a handful of "online identity consolidation" services that use XFN, including claimID and Plaxo's Open Social Graph.

Further, many "social networking" sites are adding rel="me" to their profile page links, including Flickr, Twitter, LinkedIn and more. This supports the effort of identity consolidation: Where any page claims the other, the divided identity is consolidated.

I will be covering the XFN microformat in much greater detail in Part 2 of this series.

Categories + Tags = Joyful Organization

Given my predilection for organization (and because all the cool kids are doing it), I'm using tags on A Blog Not Limited to complement categories. And much to my joy, there's a microformat to support this organization: rel-tag.

Adding rel="tag" to a link (<a>) on a page indicates what that page — or part of that page — is about. Rel-tag is broadly used on blogs where authors tag their posts to aid in the organization/categorization of content.

The specification requires that the link destination (href) includes the actual value of the "tag" as the final segment of the URL value. This is known as the "tagspace."

On A Blog Not Limited, I've applied this microformat to all of my tag links:

<a href="http://www.ablognotlimited.com/articles/tag/ExpressionEngine/" rel="tag">ExpressionEngine</a>

As well as to my category links (because, in my mind, they also describe what given content is about):

<a href="http://www.ablognotlimited.com/articles/category/experiments/" rel="tag">Experiments</a>

These examples demonstrate that a page containing these links includes information about ExpressionEngine and/or Experiments. Further, the examples show the tagspaces for both ExpressionEngine and Experiments are located at the provided URLs.

The Benefits

Need I say it again? Yes, of course, just because I love it: semantics are the primary benefit to me. Yet, as with the other microformats I've detailed in this article, there are some additional benefits.

The Firefox Operator add-on, for example, recognizes rel-tag and provides context-specific searching across other web sites, including Amazon, YouTube and Flickr. Here's how Operator treats rel-tag links for my blog:

Operator Firefox Add-On

Technorati has a tag search feature that indexes tagged blog posts and other rel-tagged content. This is useful to help boost exposure for a site or blog, as the indexed rel-tagged content can be accessed through Technorati's Tags.

Similarly, the blog search engine Icerocket supports tag based searching.

License to Kill (With Semantics)

Yeah, I know, really lame heading … moving on …

The final link-based relationship microformat I'm using is rel-license. As you may have already guessed, this microformat indicates a content license and, when used in a link (<a>), where to access that license (via the href value).

When I began A Blog Not Limited, one of the first things I did was to get a Creative Commons license for copyright protection. I then modified the copyright statement in my blog footer to include a link to the license. And it is to this link that I added rel="license":

<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported" rel="license">copyright</a>

The Benefits

Yep, semantics for one. For another, there is a FF add-on that recognizes rel-license: Tails Export. Here's how Tails displays rel-license information for A Blog Not Limited:

Tails Export Firefox Add-On

Additionally, Creative Commons itself uses rel-license when generating license markup.

And both Google and Yahoo! offer searches that filter based on rel-licensed content:

A Global Benefit

While I've detailed some individual benefits for each of the microformats discussed in this article, there is a global benefit that should be considered as well (though one of which I've yet to take advantage): CSS attribute selectors.

By using CSS attribute selectors you can define specific styles to links that include rel attributes. For example, add an icon to the beginning of a link assigned rel="license":

a[rel~="license"]:before {content: url(copyright.png);}

Granted, IE6 doesn't recognize attribute selectors, but fuck it. I hate IE6 anyway … I say go for progressive enhancement and design for the standards-compliant browsers that do support attribute selectors.

Coming in Part 2

As I mentioned previously, I will be covering the XFN microformat in Getting Semantic With Microformats, Part 2.

Stay tuned …

Update: 9/22/2008

I recently discovered that Christophe Ducamp has translated this article in French: Parvenir à la Sémantique avec les Microformats, 1° Partie : rel.

Unfortunately, I don't read French, so I can't attest to the translation. But in the spirit of spreading the good word about microformats, I'm going to promote the translation and hope it is accurate. The way I see it, the more people who know about microformats, the better.

Update: 11/04/2008

Jan Sládek has translated this article in Czech: Kódujme sémanticky s mikroformáty: 1. část - rel.

I don't read Czech either, so I can't speak for the translation. But the intention is good, so I'm promoting it.

Update: 11/27/2008

Jia Mi has translated this article in Chinese: 使用微格式来丰富网站语义: rel.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Matt's Gravatar

Matt opines:

09/09/2008

Wow, that was a great read. I have not really worked too much with mircoformats, but this has inspired me.

Thanks a lot man

Tantek's Gravatar

Tantek opines:

09/10/2008

Very nice article!

I’ve added it to both the articles page on the microformats wiki, and to the articles section on the rel page.

Please feel free to add your follow-up articles to the microformats.org/wiki/articles page as well!

Justin's Gravatar

Justin opines:

09/10/2008

You’d be surprised at how many people I know still don’t implement MF’s… of course I guess they haven’t read enough blog posts like this one! ;)

Jason's Gravatar

Jason opines:

09/10/2008

Great article. I’ve seen the tags and knew they were related to microformats, but I never knew about their uses. Going to have to explore this more.

Emily's Gravatar

Emily responds:

09/10/2008

@Tantek - Thanks so much and I’m truly honored. It was your presentation at the first 2-day An Event Apart in NYC a few years back that got me on the microformats bandwagon in the first place. And I will be sure to add my future articles to the Microformats wiki.

@Justin - I’m never surprised anymore, especially living in Albuquerque where even standards aren’t followed (much less understood). This is exactly why I’m writing these articles. Glad you found this one useful.

Michael's Gravatar

Michael opines:

09/10/2008

Fantastic, clear, readable article. It’s rekindled my enthusiasm for pushing for microformats at work, and nudged me to continue rolling them out on my own sites.

Jen's Gravatar

Jen opines:

09/10/2008

Excellent primer for those of us new to MFs.

Joe Lewis's Gravatar

Joe Lewis opines:

09/10/2008

Well done. Looking forward to more.

fornls's Gravatar

fornls opines:

02/10/2009

So using this tag cleverly separates different pages having the same tag value. This may be useful for blogs having all of the posts scattered around only few tags.

I didn’t know about the license tag. Informative article. I found this just when I wanted to know about “me” tag and searched in google.

Srinivas's Gravatar

Srinivas opines:

07/01/2009

So can this be taken as anchor text of an image?

Christopher Yeleighton's Gravatar

Christopher Yeleighton opines:

10/01/2010

Please suggest how to mark up a list of hyperlinks to translations for an image.  The images is TIFF (they are images of translations), so they cannot be embedded in HTML.  I cannot use @rel directly because what I need is a triple (that hyperlink contains a translation of the document referenced by this hyperlink to language X), and I am unaware of any discoverable way to embed such information in TIFF.

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!