Reinventing Hypertext Links

Consider the following example of a paragraph containing standard hypertext links:

My friend Michael came round today. He brought a new book about the singer Tom Jones called The Story Of My Life. He said he'd bought it from Stonewaters the bookstore in town. The cover depicted a silhouette of the Welsh singer's face lit from the side. Inside there was a photo of him with a beard performing live at The Brits 2003 on UK TV.

The links are all underlined - there's no easy way to tell at a glance what the links represent. Do they lead to a separate website? Or a page on the same site? Or an image or file? Although we can look at the bottom status bar of a typical browser and see the full address of the link displayed when hovering over it, you would have to hover over each link to find out where they all went. Plus an image might be displayed using HTML code as a standalone page. That would mean the address wouldn't reveal what was on the page.

It's time to clarify the situation.

Now consider the following paragraph, sharing exactly the same text, but with the links styled:

My friend Michael came round today. He brought a new book about the singer Tom Jones called The Story Of My Life. He said he'd bought it from Stonewaters the bookstore in town. The cover depicted a silhouette of the Welsh singer's face lit from the side. Inside there was a photo of him with a beard performing live at The Brits 2003 on UK TV.

To illustrate the differences I've devised a simple visual key that can be applied to all hypertext links where possible:

• Normal links (underlined) = A link to a page on the same site or an email address
• Italic links = A link to an image or file only
• Bold links = A link to a separate website

The beauty is that the links now offer a visual clue to their destination. A user can scan a document quickly and see where the external website links are. They might choose to ignore the images (or files) linked to. They will also know that the other links will therefore take them to another page on the same site.

How To Do It

All that's needed to add 'link-aware' functionality as described above is just two extra classes in your stylesheet. Start by ensuring all links are underlined, then define a class for italic and for bold:

a {text-decoration:underline;}
.b {font-weight:bold;}
.i {font-style:italic;}

Then use these in your hypertext links to style them as required. Example: <a href="groovy.gif" class="i">Wow!</a>

Using b and i also helps you to remember what each style is for. Use b for a link to a website, or i for a link to a file or image.

The only other requirement is to tell your readers what the styled links mean. This can be done by defining them briefly, perhaps in a row at the top of the screen, or in a box at the side.

Drawbacks

Obviously there are potential problems to consider by styling links. What if the browser cannot use bold or italic? What if the font used is not markably different between bold and normal style? What if the page requires all text to be in bold or italic, or all links to be free from underlining? One solution might be to use colour instead, and display a simple key to guide the user. I consider using colour a bad idea though, because it could cause problems with monochrome devices, blind or colour-blind users. Instead you could try different fonts or even font sizes. Or unique types of underlining such as dotted lines.

Conclusion

Styled links offer a new way to make web pages more user-friendly, more accessible and more content-rich by describing the destination of the link with a visual clue. Using my technique a user can view a whole screen of links at once and choose instantly whether to follow them or not. Otherwise, text doesn't have the power to tell us where a link leads to. "Click here!" could be a link to anything. But if you style it using my guide above, you would always know what type of link it was.