Underlined Links and how to get rid of them

by Joe Gillespie — Oct 1, 2001

The most obvious indication that text on a Web page is hyperlinked is that it is underlined. This is the default in HTML and is fairly unambiguous. The underline is usually accompanied by a difference in colour too – one colour for an unvisited link, another for a visited link and there can also be colour changes on rollover or mouse click.

Typographers dislike underlining as a means of emphasis. It is a technique that typists used because their mechanical typewriters had no other means of emphasising text but a lot of these bad habits have carried over into word processing.

Often, hypertexts link can be implied without resorting to untidy underlines. If the context of the text is obviously a menu or navbar, which might be rollover graphic anyway, then the underline is redundant. The critical word here is "obvious". A link should look like a link without the user having to test its functionality with the mouse. Hiding links on a page for cosmetic reasons is "styling", not good design – especially if they are essential for the navigation of the site.

If the link is in the middle of a passage of text, then its function can be even less obvious – is it a link or just for emphasis? I often use a change of colour for emphasis because there are so few weights of type available on a Web page. The main problem here is that there is no other standard and accepted way of indicating a link other than underlining. If you use coloured type or background colour or boldness or whatever, it means that the reader has to adapt to your interface conventions for this particular page or site. Sometimes it works, sometimes it doesn't. It's your responsibility to make sure it does!

Thankfully, getting rid of the underline is not easy so we are not subjected to it by every Tom, Dick and Harriet that can throw a Web page together. You have to use the Cascading Style Sheet attribute text-decoration: none.

The following style definition in the <HEAD> of a page gives a coloured link that changes colour and becomes underlined only when moused over. As the "hover" attribute is not supported in Netscape 4 and below, users of those browsers will not see the rollover effect and will depend on the cursor visibly changing.

<style media="screen" type="text/css"> <!-- a: link { color: blue; text-decoration: none; background-color: transparent } a: visited { color: red; text-decoration: none; background-color: transparent } a: hover { color: yellow; text-decoration: underline; background-color: transparent } --> </style>

If you don't want the underline on hover, then change the definition to:

a: hover { color: yellow; text-decoration: none; background-color: transparent }

So that is how to do it. Whether it works or confuses your readers depends on its context more than anything. I use it for the headline links on the new WPDFD home page but not on a busy page like this one.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float