Marking up relationships
/49
A couple of weeks ago I was encouraged by Jeremy Keith to put some rel values on links in my website, so I read up on them to find out when it's appropriate to use them.
I was particularly interested in the way in which they're used to denote relationships between people. rel values can be put on links and are used to indicate the relationship of the target to the resource on which they appear. Since it's Valentine's Day, I want to use this opportunity to see how we can mark up human to human relationships.
Marking up relationships is documented as XHTML Friends Network, or XFN for short.
Why bother with XFN?
The idea of using XFN is that it decentralises data. Social networks that support it can build tools that make it easier to import, export and sync our contacts. For example, when you create an account with Huffduffer and add the URL to your website, the service searches for sites that are linking to yours with rel="me" and automatically adds the websites you have an account on. I haven't updated my profile on Huffduffer for months, but it has added links to services I've signed up to since then.
Other websites that use XFN include Flickr, Google Profiles, Quora, Lanyrd and Dribbble. Twitter uses rel="me" when you add your website, but doesn't appear to add it to your contacts.
The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy.
—Tim Berners-Lee, Weaving The Web
How to XFNify your site
You're probably already familiar with using the rel attribute to reference a stylesheet; you're basically defining the relationship between the stylesheet and the current document.
<link href="style.css" type="text/css" rel="stylesheet"/>It's the same concept with XFN, but you're indicating that this is a human to human relationship rather than a document to document relationship.
Marking up a contact
<a href="https://www.maban.co.uk" rel="me">Anna Debenham</a>In this example, I've used rel="me" to show that the page I'm linking to represents the same person as the one I'm linking from. You can use more than one rel value, as demonstrated here:
<a href="https://www.hicksdesign.co.uk/" rel="contact met">Jon Hicks</a>This indicates that I've met Jon, and consider him a contact.
Representing affection
In this example, I'm giving a rel value of sweetheart. Sorry, Cennydd.
<a rel="sweetheart" href="https://cennydd.co.uk">Cennydd Bowles</a>This is the meta data profile description of when to use rel="sweetheart"
- sweetheart
- Someone with whom you are intimate and at least somewhat committed, typically exclusively. Symmetric. Not transitive.
The XFN website has an amusing explanation for why they chose the endearing word "sweetheart" over something more formal:
This value was the best gender-neutral term we could find to represent the more common terms "girlfriend" and "boyfriend," which it is meant to represent, as well as informal terms like "snookums", "honey", "pumpkin", and "sweetie-pie".
You can also use rel="crush", rel="spouse", or even rel="date" for someone you're dating.
Someone you look up to
You can use the value muse to reference someone who inspires you, such as a role model.
Someone you work with
Use the value co-worker to refer to someone you work with, and colleague for someone in the same field as you. (A colleague might not work in the same company as you but you're in the same field of study.)
Just friends
The rel values friend and acquaintance can be used to mark up people you know well.
Family
kin can be used to reference someone in your extended family, and parent, sibling and child to signify a closer relationship.
Nearby contacts
If you've got a housemate, you can mark them up with co-resident, or if they live nearby, use neighbour.
Styling relationships
We can target the attribute in the CSS to style any links with a particular rel value. In this example, I'm adding a little heart icon to the left of all links that have the rel value of sweetheart.
The HTML:
<a rel="sweetheart" href="https://cennydd.co.uk">Cennydd Bowles</a>The CSS:
a[rel~="sweetheart"] {
background-image:url(heart.png);
background-repeat: no-repeat;
background-position: left 2px;
padding-left: 15px;
}The Result: Cennydd Bowles
Awwww! :) This won't display in IE6 because it doesn't understand attribute selectors. That shouldn't stop you using it though.
Romantic code
Since the only way to see whether these values are being used is by viewing source, you could add them in without the person you've referenced even knowing. Imagine viewing source and finding rel="crush" in a reference to you. Then again, could be a bit creepy if you don't share those feelings!
…refers to a person to whom you are attracted, perhaps even strongly, but who might not express the same feeling in return, or even know that you exist. Crushes are also usually secret, which makes their inclusion in XFN (a public data set) somewhat interesting. We expect that the use of crush in XFN will be in a teasing manner, as between two friends who like to flirt but do not actually date.
It's also worth pointing out that all the values are gender neutral, positive and assume a monogamous relationship, so you won't find any rel="mistress". The reason isn't ideological, but purely practical:
There were a whole pile of love, romance, and sexually oriented terms we considered and discarded. Some were rejected on the grounds they were unnecessary—for example, polyamorous individuals can indicate their other partners using values already defined (having two links marked sweetheart or spouse, for example).
Relationships defined by timestamps
Another thing is that these values are all dependant on the time they are written. You could give someone a rel value of co-worker today, and a few months later they could be working for a different company. Would you then go back and change those values in older posts?
Blogs by their very nature are a time based format. It is possible to use XFN values to refer to people linked to within a blog post. It could then be presumed that those relationships were as defined as of the timestamp of that blog post. Later blog posts could mention the same people with different XFN values. By viewing a set or series of blog posts and watching the XFN values on the interpersonal links change, one could easily derive implied temporal information about the nature of the relationships.