Just like Information Superhighway and cyberspace, the terms hyperlink and hypertext seem to have dropped out of fashion. Despite this, hypertext is still the foundation of the Web — one of its core features. The humble HTML <a> tag is the sole element that produces the hyperlinks that change plain text into hypertext. It still surprises and annoys me when such a central feature of a web page seems to be taken for granted. Poor linking practices are common — editorially and visually — and it has a direct negative impact on usability.
The Rogues Gallery
It’s time to out these outlaws, so here is my rogues gallery of hypertext — all of them wanted criminals for crimes against usability!
The Tautology
The tautology link is not a new innovation, but it may appear suddenly, without warning, in a block of hypertext. You may have seen hypertext that looks like this:
You can find two great examples <a href="/">here</a>
and <a href="/">here</a>. <a href="/">Click here</a>
for another one!A hyperlink implies a destination that is reachable by clicking the link; the tautology link only serves to state the obvious!
The Leisure-suit
The leisure-suit link just points vaguely. If you want to follow it, you’re on your own. Here’s an example:
In fact, you can <a href="/">find</a> <a href="/">so</a>
<a href="/">many</a> <a href="/">examples</a> of poor
linking you may think the world no longer cares.Too lazy to write meaningful hypertext? Just link a whole bunch of words and let the user deal with it.
The Middle-man
Some authors prefer to contract their hypertext out to a middle man. There’s a place for URL shortening services, sites like Twitter, for example, but there’s no excuse for using them in your hypertext. In the absence of any other context the user can fall back to examining the URL of a link. Taking that away by using a URL shortening service is the equivalent of sending them down the river without a paddle.
The Interference
You often see this in web sites like Wikipedia and Everything2 — words that are linked to information that has little relevance to the surrounding text. For example:
Hyperlinks are the <a href="/a_page_about_glue">glue</a>
that holds the Web together.The Departed
Against the departed, hypertext never has a chance. Have you noticed that many mainstream news media web sites refer to other web sites without providing links in the article body text? Call that hypertext? It’s a massacre!
The Stalker
You’ll only see a stalker link when you’re right on top of it! This one is becoming less common, but you still see examples occasionally. The stalker link is so similar in appearance to the surrounding text, you’d never even know it’s there.
The Telemarketer
The scourge of hypertext, the telemarketer link includes a hovering box displaying a thumbnail preview of the target web page. What possible use is there for a small blurry thumbnail of the link target that pops-up and obscures the surrounding text? And what about those double-underlined advertising links? Users should never have to experience those.
The Good Hyperlink
Poor quality hypertext is a usability disaster causing annoyance, confusion, and anxiety. Users expect links, and that the links will be relevant and useful. A good hyperlink is relevant to the surrounding text and provides enough information for the user to make an informed decision about whether to leave the current page they’re on and follow.
Here’s an example of a useful hyperlink:
For excellent examples of finely crafted hypertext
look no further than <a href="http://kottke.org/">kottke.org,
the online home of Jason Kottke</a>.The linked text must have relevance, as it’s the first hint the user will receive as to the nature of the link. The test of good link text is whether it can stand alone on a page, outside of the hypertext of which it’s a part, and still make sense.
Links must also be styled differently to the surrounding text. They can be another color than blue, as long as it’s different to the normal text, and that all the links in the page are the same color, so they’ll be clearly visible.
A title attribute is optional, but should be used independently from providing a context because the tool tip only appears when using the mouse. If the link text is sufficient, it’s unnecessary anyway.
Well-crafted hypertext is simple to read and use, and frankly, simple to create! Are you guilty of crimes against hypertext?
Andrew TetlawiOS Developer, sometimes web developer and Technical Editor.
