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

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Practical Markup

Since XFN describes social relationships via links, the markup is always a link (<a>). But it is still worthwhile to see some examples of how these links might appear in content.

Blogroll using <ul>

I mentioned that the blogroll trend was, in part, inspiration for the genesis of XFN, so let's see how it looks in action using an excerpt from my own blogroll:

    <li><a href="">Chris Harrison</a>
    <li><a href="">Ian Pitts</a></li>
    <li><a href="">Virginia


Each of the links in this example is to a site about a person I have met in real life, so I will add the rel attribute to each of my links and assign the value met:

    <li><a href="" rel="met">Chris
    <li><a href="" rel="met">Ian
    <li><a href=""
rel="met">Virginia DeBolt</a></li>


Additionally, each of these folks is someone I consider a friend, so I will also add that XFN value to my rel attribute, making sure to separate the multiple values with a space:

    <li><a href="" rel="met friend">
Chris Harrison</a></li>
    <li><a href="" rel="met friend">
Ian Pitts</a></li>
    <li><a href="" rel="met
friend">Virginia deBolt</a></li>


One of the links is to my boss, so for his link I will also add the co-worker value:

<a href="" rel="met friend
co-worker">Ian Pitts</a>


Another link is to someone who is my professional peer with similar interests and skills, so in goes the colleague value:

<a href="" rel="met friend colleague">
Chris Harrison</a>


Finally, the last link is to someone whom I admire and who inspires me on a regular basis—a muse:

<a href="" rel="met friend muse">
Virginia DeBolt</a>

The end result

Now I have a nice blogroll that also indicates my social relationships:

    <li><a href="" rel="met friend

   colleague">Chris Harrison</a></li>
    <li><a href="" rel="met friend

   co-worker">Ian Pitts</a></li>
    <li><a href="" rel="met friend

   muse">Virginia DeBolt</a></li>

I would use this same markup structure (an unordered list) for lists of followers/friends in a social network, such as Twitter. Sadly, while Twitter embraces the semantics of XFN, it does not embrace POSH, instead using a bunch of completely nonsemantic <span> elements (tsk, tsk, but I still love you, Twitter).

The logic behind the markup

There's not much to the logic for a blogroll. It is a list of links to blogs/sites that I read and recommend. So a link element makes POSH sense. And because there is no sequence to these links, an unordered list (<ul>) is appropriate.

However, if you wanted to have a blogroll with a bit more information than just a link, such as a brief description of the site/blog, you could use a definition list (<dl>). In this case, you would contain your XFN link in a <dt>, followed by your brief description contained in a <dd>, like so:

    <dt><a href="" rel="met friend

muse">Virginia DeBolt</a></dt>
    <dd>Tips, web design book reviews, resources and
observations for teaching and learning web development.</dd>

Note that I only included one link and description in this example for brevity's sake (I already suspect I've killed a few trees and this book isn't even halfway finished). I would not encourage a definition list with a single item. From my semantic perspective, lists should be for two or more items.

XFN in natural language

Links, by their nature, are commonly included in natural language. That is, you can put links in language that appears in natural sentences, as opposed to chunking the content in list elements as I've done in the previous examples.

So let's take a look at applying XFN to links that appear naturally in sentences of a paragraph that might be in one of my blog posts:

<p>At SXSWi, I attended an excellent session on the future
of web education, along with my friends Chris Harrison and
Virginia DeBolt.</p>

Adding the links

Whenever I reference a person on my blog (or any site I maintain, for that matter) and that person has a site, I always give them a little link-love:

<p>At SXSWi, I attended an excellent session on the future
of web education, along with my friends <a href="http://">Chris Harrison</a> and <a href="http://">Virginia DeBolt</a>.</p>

Adding the XFN

Once the links are in place, I just drop in the appropriate XFN values for each person's link:

<p>At SXSWi, I attended an excellent session on the future
of web education, along with my friends <a href="http://" rel="met friend colleague">Chris Harrison
</a> and <a href="" rel="met friend

muse">Virginia DeBolt</a>.</p>
  • + Share This
  • 🔖 Save To Your Account