Skip to page content or skip to Accesskey List.
Search evolt.org
evolt.org login: or register

Work

Main Page Content

Writing effective link text

Rated 4.16 (Ratings: 10) (Add your rating)

Log in to add a comment
(14 comments so far)

Want more?

 
Picture of trenton

Trenton Moss

Member info | Full bio

User since: March 04, 2004

Last login: November 27, 2005

Articles written: 4

When I was younger I used to love reading choose-your-own adventure books. Instead of reading the book from start to finish I could make the decisions for the main character and ultimately decide the outcome of the book. The Internet is essentially the same, except it's the largest choose-your-own-adventure book ever with literally billions of pages to choose from.

Why is link text so important?

Because of this unique ‘choose-your-own adventure’ way the Internet is structured, it's essential that we can find and understand links quickly. Most pages we visit on the web don't contain the information we're looking for, but merely help us find the page we want. Think about the process you go through to find information on the web:

  • You go to a website
  • You scan the page looking for a link that might take you where you want to go
  • You follow the link and scan this new page looking for the information you're after
  • If you can't find what you want you scan through the links on this page and click on one
  • And so on until you find what you're looking for (or until you give up!)

I can recall situations where I've spent up to 20 or 30 minutes just searching for something on the Internet, every few seconds clicking on links that I was desperately hoping would take me to the information I was looking for. If I could have easily found those links and quickly understood their destination maybe I wouldn't have had to search for so long.

So, we've established that it's important for link text to be easy to find and understand. So what can you do to achieve this goal? Simple. Follow these six guidelines for how to write effective link text and your site visitors will be able to find what they're looking for quickly and efficiently.

1. Contrast link text colour and regular text colour

In order to be able to easily spot them, links should be a different colour to the rest of the text on the page. Sounds pretty obvious but it's truly amazing how many websites don't do this. This is most common in corporate websites who decide to have black text and black link text.

By far the most common colour combination is black text with blue link text, but it's certainly not necessary to follow this. To avoid confusion though, it is probably best to avoid making regular text blue and/or link text black.

Some usability experts insist that link text has to be blue as blue is the most common link colour on the web. They argue that Internet users become accustomed to certain conventions and every website should follow these conventions or fear confusing their visitors. However, there are enough websites with non-blue link text for this to not be labeled as a convention so it could be argued their reasoning isn't sound.

2. Underline link text

When we scan down pages any horizontal line cuts right through our vertical line of scanning. The underline below link text is an example of this so it's really advisable to include those underlines with link text. Additionally, underlining link text can be beneficial to the one in 20 colour blind people and users with poor vision. One quick tip: Never, ever, under any circumstances, underline non-link text.

It's not always necessary to underline links in navigation menus because they only contain links. When we look at navigation menus we therefore don't have to make the distinction between link and non-link text.

3. Ensure link text is descriptive of its destination

We scan web pages looking for the information that we're after. Have a quick look at the following two paragraphs:

Example of two paragraphs, the first containing the link text, click here. The second contains the link text, about our widgets, so is more easy to scan

The first thing that stands out in the first paragraph is ‘click here’. By itself, ‘click here’ is completely meaningless and its use should be avoided like the plague. The second paragraph is far superior as when you scan it you can instantly work out the link destination. You can then decide whether to click it or not without having to read any of the surrounding text.

4. Make visited links change colour

By changing the colour of visited links users are provided with a visual clue as to where they've already been on your website. This is essential if you want to allow visitors to freely explore your site without continually going back to where they've already been - a frustrating experience and one that's sure to encourage them to go elsewhere.

It's also important to choose effective colours for unvisited and visited links. Look at these three examples:

Three examples of unvisited and visited link text colours

The first one is the best as it's the browser default value and people are most accustomed to it.

The second one is fine too. If you don't use the default blue/purple colour scheme then make the visited link text appear less bright and saturated so that unvisited link text stands out above it - this has become quite common on the web so is perfectly acceptable.

The third example is not effective at all. Although the two colours are different, after visiting a few pages users may get confused as to which are the visited and which the unvisited links.

One other thing to be aware of: to prevent confusion, wherever possible avoid using purple for unvisited links and/or blue for visited links.

5. Limit link text to a maximum of four words

When web pages appear we scan them, looking for the link that will take us to the information we're after. When we scan we only spend a split-second looking at the text contained in any link, so it's really difficult to quickly take in the content if there are more than five words in the link text.

Usually it's really easy to reduce the number of words within the link. For example, we can change:

Find out more about next week's conference

to

Find out more about next week's conference

If you really can't convey the meaning of a link in less than four words, be ruthless! Include the most important words and remove the other words from the link, keeping them in the same place in the sentence. When users scan the screen they'll be able to understand the basic meaning of the link and can then read the words around it. They can then out if the link really will take them to the destination they want to go to.

6. Place important words at the front of link text

When scanning web pages for the link we're after, the first words we see are the words at the front of the link text. We may not even see any of the words after the opening two words. So, to improve the above example even more, we can change:

Find out more about next week's conference

to

Find out more about the conference next week

The word conveying the most useful information to the reader, ‘conference’, is at the front of the link text and is now the most likely to be seen by our site visitors scanning the page.

Conclusion

Link text is really important. They're what make the Internet what it is. Links allow us to choose our own adventure on the Internet. Follow these guidelines and your links will be easy to find and understand quickly, for which your site visitors will surely thank you.

Trenton Moss is crazy about web usability and accessibility - so crazy that he set up his own usability and accessibility consultancy (Webcredible). He's extremely good at usability training and web writing training.

Strike-through

Submitted by luminosity on July 23, 2004 - 05:47.

One good way of marking visited links from a block of text where you're not likely to want to follow a link more than once is the strike-through line. A good example of this can be seen on Simon Willison's weblog in the top right hand corner, the list of quick links. It's a great way of keeping people's scanning to only what's new on the list, or what they haven't visited (but generally, if you visit at least one a day, you'll stop scanning at the first struck-through link). Not so good for regular lists you expect people to click through more than once, though, such as internal site navigation or 'blogrolls'.

login or register to post comments

Strikethrough

Submitted by codepo8 on July 26, 2004 - 02:12.

It is an idea, but wouldn't that mess with the idea of <del> and <ins>?

login or register to post comments

Not really

Submitted by luminosity on July 27, 2004 - 01:00.

I don't really think it would, since as a list of links which get a strike through whenever you oen one it's fairly obvious what they mean. Additionally, with a list of links, if you're changing it you're likely to be removing it altogether, because of, ahem,unsatisfactory content, or modifying the link itself so that it works, rather than modifying the text around it. After all, since the link is usually a very small summation of the title, what's there to change?

login or register to post comments

Maximum of 4 words

Submitted by ward on August 6, 2004 - 06:34.

I think there is a competing concern here ... namely, it is common to find *too few* words included in link text. It has to do with the size of the target that you are asking users to "hit" with their mouse/cursor (Fitz's Law, etc). So I think there is a balance to be achieved, between too many words and too small of a target. This is more important, I think, when text sizes and line heights (leading) move towards the smaller end of the scale, for obvious reasons. Four or five words is a good "rule of thumb" but don't get carried away with it!

login or register to post comments

Item 6: Rewording

Submitted by patzee on August 7, 2004 - 14:53.

Be careful about reworking links. If you analyse your two examples below, you'll see that the rewording changes the information.

The first example you gave indicates the conference will occur next week:
"Find out more about next week's conference"

The second examples you gave indicates that more information about the conference will be available next week:
"Find out more about the conference next week"

Regards, Pat

login or register to post comments

yah right

Submitted by sardonyx on August 8, 2004 - 16:46.

i agree with your article. and i think, using css to create an effective link or using a flash based navigation is a good idea too.

login or register to post comments

Title Attribute

Submitted by MrWeeble on August 16, 2004 - 01:24.

If there is nothing you can do about changing the link text to something more descriptive, (for instance due to powers that be insisting that the text remain as written) then you can use the Title Attribute to convey more information to the user.
For more information <a href="wherever" title="Further information about the conference">click here&lt/a>
will in visual browsers provide a useful tooltip, showing what information lies behind the link, in text browsers it may be shown in a list of links and it will also help search engines properly index your page.

login or register to post comments

Providing 'Tooltips' - Very Professional

Submitted by BruceBagel on October 12, 2004 - 12:18.

I like the idea of including 'title'/'tooltip" information in the link. It seems quite professional to aid the user by providing additional information while he is hovering. It would aid the user in making his click-through decisions. It also keeps the original text focused on it's original message.

This is a good list of rules to check your work by. I have found it quite annoying visiting sites that don't underline their links. It does make it more difficult to read. It's also difficult when sites underline text that are not links. I find myself repeatedly clicking on underlined text that does nothing. Along with this, is maintaining standard link coloring as much as possible. I do begin to rely heavily on the 'changing color feature' to keep track of which links I have visited in a site. I especially use this feature in a confusing sites with 'spaghetti'/circular linking. And when the visited links don't have a second color. It just adds to my flustration in trying to make sense of the site.

My jury is still out about using strike-through for visited links. It would seem to me that good standard use of color would be enough. But the strike-through is not used all the much else where and it is very explicit graphically. I guess I would say it might be okay as a personal, informal style, as in a blog, but probably not suitable for the general public on a regular site.

login or register to post comments

Using CSS

Submitted by alexzing on March 3, 2005 - 00:16.

Thank you for your article. It's very informative. In my opinion it's will be more useful to include the basic CSS methods in your entry.

login or register to post comments

Submitted by taracleveland on July 15, 2005 - 00:58.



login or register to post comments

Let's not forget...

Submitted by Heironymous on March 19, 2007 - 01:09.

You should also consider the search engine keyword value when you write your link text. Link text should be on target for the keywords you want to be found for in the search engines. For example on my own stock photography website I have New York photos, Washington DC photos, photos of Italy, photos of Spain, etc. Rather than just putting a url only link it's always better to use keywords describing the page and link to it. --Andrew

login or register to post comments

I agree. It is however a

Submitted by cianuro on March 19, 2007 - 01:48.

I agree. It is however a little difficult to fine tune the balance between having an accessible and descriptive link and correctly internally linking a page for search engine reasons. For example, the perfect balance for text based browsers, visually impaired and of course robots. Rather than using "SE services" or something a little more vague. Jacob Nielsen has some great articles on accessible linking over here: http://www.useit.com/

login or register to post comments

Well aldo I agree with the

Submitted by cajadaj on March 20, 2007 - 22:05.

Well aldo I agree with the article most part I must say that there are parts that havent proved to be all that logical as it seems at first glance. Not allways the underline does the trick, quite the opposite in fact. I have some experiments done on some of my test sites a while ago and stuff like underline really did not be to usefull. On the other hand the color contrast is in my oppinion the most important part, and the very position of the link in the text can be leading to the visitors.

login or register to post comments

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.orgEvolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.