Misleading Links

Follow-up to an awkward twitter conversation between me and Paul Boag on links shaped like URIs and what they represent

Link usability and URI usability have been a subject I’ve had occasion to comment on briefly before. An elongated twitter conversation with Paul Boag caused me to think a little deeper than I had previously.

Paul tweeted this link to a post-linking-to-a-post written by Rob Borley:

I clicked through to find this page on boagworld, then stalled. There was clearly a link to the external post somewhere, but where was it? The only link I could see was one going to econsultancy.com, I couldn’t see any that linked to the…

Oh.

Realising my mistake I clicked through and read Rob’s post. It was pretty informative and a good read, although I couldn’t help but think that the link to it back on boagworld was misleading. So I tweeted to Paul…

…and suggested an improved version:

This started a long, rambling stream of confusion and misunderstanding on both sides, which I’ll not embed here. The point is, I couldn’t communicate to Paul the fact that, when seeing a link whose text was a URI, I naturally assumed that it linked to that URI exactly. I just didn’t seem to be able to explain it right…

The problem being that the link did not go to econsultancy.com! It referred to a page on econsultancy.com.

Tweets being too awkward, I posted a note, and then a screenshot, desperately trying to express what was second nature to me. I thought I was almost there, when…

Argh! That makes… no sense. If Rob wrote the article for the company and not the page, why does the link which looks like it should link to the company actually link to the page?

This was getting too awkward. What was wrong with me? I didn’t seem to be able to coherently express what I thought was a really simple sentiment.

So, I decided to write this article, to see if my thoughts were better expressed/organised in long form.

My Thinkings

The text and/or @title of an Anchor element should accurately reflect the resource it links to.

When I see a link with only a URI or domain name as it’s text, I immediately assume that it’s @href is equal to the text, and I argue that it is misleading to do otherwise.

Example

This is the example the whole post is based around.

Misleading

“I wrote this post for econsultancy.com a few weeks ago.”

I wrote this post for <a href="http://econsultancy.com/uk/blog/9945-apps-do-not-equal-money-fools-gold-revealed">econsultancy.com</a> a few weeks ago.

I argue that this is misleading because the <a> tag’s text was clearly a URI, but it’s @href was a different URI.

Improved

“I wrote this post for econsultancy.com a few weeks ago.”

I wrote <a href="http://econsultancy.com/uk/blog/9945-apps-do-not-equal-money-fools-gold-revealed">this post for econsultancy.com</a> a few weeks ago.

Or alternatively:

“I wrote this post for econsultancy.com a few weeks ago.”

I wrote <a href="http://econsultancy.com/uk/blog/9945-apps-do-not-equal-money-fools-gold-revealed">this post</a> for <a href="http://econsultancy.com">econsultancy.com</a> a few weeks ago.

Why is this better? It is much clearer which text links to what:

  • The text “a post on econsultancy.com” links to… a post on econsultancy.com.

Or:

  • “a post” links to a post, and;
  • “econsultancy.com” links to econsultancy.com.

Summing Up

Be clear what your hyperlinks link to.

  • Use of a URI/domain for text of a link implies linking to that URI, and represents an online identity of some form
    • E.G. boagworld.com represents Paul Boag and the Boagworld podcast, and implies a link to http://boagworld.com
    • waterpigs.co.uk represents my identity (Barnaby Walters) and implies a link to http://waterpigs.co.uk
  • Other usage is misleading and (I argue) has a negative impact on the usability of your site

I can’t see any relevant comments in the W3C html5 <a> Element Spec.

Help me out here. Is this a geeky problem restricted just to me? Or should meaningful hyperlink text be considered a best practise?