Rob Huddleston

The web was originally developed, at least in part, to provide a means by which documents can be linked together. Hyperlinking is one of the very first things you learn when you get started in web design. Yet, as with a lot of other things, a lot of people consistently get it wrong when working with links.

I’m going to cover two basic, but common hyperlinking mistakes here. The first is used to be much more common than it is today, but it still exists: not using logical text for the hyperlink. “Click here” was perhaps the first cliche of the web – a sure sign that a designer wasn’t really thinking through their pages. I hesitate to go right out and call it lazy design, but …

One of the blogs I follow every day is scottkelby.com. Scott, in case you’re not familiar with him, is the President of the National Association of Photoshop Professionals. He’s also the best-selling computer book author out there. More important, at least in my eyes, is that Scott is also the grand-poobah when it comes to Photoshop knowledge. If you use Photoshop at any level and want to get better, you owe it to yourself to so as I have done and add his blog to your daily read list. I have nothing but complete respect for Scott, but that said, there is one thing that I wish Scott would change: his approach to links. Take a look at the screen shot below, taken from Scott’s blog today (March 6, 2009):

See what he’s doing there? He’s not using the words “click here”, but he might as well be with that “Here’s the link” at the end. What purpose does that serve?

There are several problems with the “click here” or “here’s the link” approach. To begin with, it’s a bit insulting to your reader, if you think about it. They know they’re supposed to click; they know it’s a link. So why tell them. It’s kind of like giving someone directions to a store in the mall by saying, “OK, so you need to go out in the mall, turn right, and then go downstairs. Oh, and by the way. That big hole in our wall? That’s the door. You need to go through it to get started.”

Instead, wouldn’t it make a lot more sense to just link the relevant phrase in your text to the page in question? Take the second paragraph from scottkelby.com above: instead of the useless “Here’s the link” stuff, why not just link the words “check out the work of photographer Loretta Lux.”

That approach is also a lot cleaner. It reads better. It’s more accessible: a screen reader will often present all of the links on a page to the user separately. Often, a blind user on Scott’s page would be presented with a list of links that all said “Here’s the link”, and have no way of knowing which one belongs to what text. Oh, and one more key element: search engines like Google do a lot of their indexing based on the text provided by links. Having a site as prominent as Kelby’s link to yours would be a big boon for search engine rankings, but unfortunately for Ms. Lux, most of that boon is lost because Google is going to index the words “here’s the link” with her page, not the much more important words like her name or the fact that she’s a photographer.

So please, take a moment to think about your link text. I’m going to go so far as to say that there is never, ever a time when you need meaningless “click here” text. If you think you have an example where it’s simply impossible to word the text differently to get rid of it, let me know in the comments. I’m willing to bet that I can come up with a rewording that will make more sense.

The second problem I want to mention here, and the one that actually inspired this post, is much newer, and unfortunately becoming much more prominent these days. Ironically, in many ways, it’s an offshoot of fixing the problem above. If you are going to have words in the middle of a sentence serve as your link, please make sure that the text is obviously different! Here’s the example that made me decide I needed to write this post:

There are two links in that paragraph. Can you find them? If you were to visit the actual page from which the screen shot was taken, you could of course hover over each word with your mouse, waiting for it to change into the hand and let you know there’s a link. This is in fact exactly what I had to do when I visited the site: I could tell from the context that there should be a link in there somewhere, but I certainly couldn’t see anything, so I had to start mousing over stuff. Seriously? In what design school, exactly, is it being taught that you should make your links into some sort of Easter egg hunt?

In the original design of HTML, links were to be blue and underlined. Blue was chosen most likely because it is the darkest color that is most obviously not black, while underlining links made sense because no real designer would use underlining for anything else. But both were there because it was understood that it’s important that links stand out: that there be contrast between them and the surrounding text.

Link many designers, I’m not a huge fan of underlining links on things that are obviously navigation: look at the sidebar to the right of this article, and you’ll see that the link’s aren’t underlined. That’s because I believe that it’s obvious from the context that those are links, and because in every case, the entirety of the text in question is a link.

The body of a document in a difference story, however. Assuming that you read and took to heart the whole first portion of this post, you know by now that your links should be embedded seamlessly within your text. However, they still need to stand out. So I will always underline the text of the links in the body of a page when I create it from scratch, as well as making them an obviously different color. Rob Sommers, however, pointed out (correctly) that this blog actually contradicts that, since as you can clearly see links in the body on this page are not, in fact, underlined. So the correct statement would be simpler: just make sure that the links are the page are nice and obvious. Underlining is probably best; making the text bold I think works well, too (although if you disagree – if you think that the links within the text are hard to find – please let me know in the comments.)

So there you have it. Rule #1 for linking: link meaningful text, instead of garbage like “click here” or “here’s the link.” And rule #2: Never make your users have to search for that link within the text.