Removing Link Underlines In HTML

CSS makes it easy to remove the underline from links in HTML. However, in most cases this makes it difficult for visitors to move around the website.

How to do it

To remove the underline from links, add the following code to the <head> section of the document:

<style type="text/css">
  a{
    text-decoration:none;
  }
</style>

If you want to learn CSS, two of its creators have written a book about it:

Why not to do it

Without the underline, visitors are relying on the colour of text to indicate the presence of a link. With the rise of mobile technology (in particular mobile ’phones), many visitors are using monochrome screens and are unable to distinguish non-underlined links from the surrounding text. The one exception is in navigation systems (for example, menu bars) where the presence of links is obvious from the context.

For more information on the use of non-standard link styles, and other usability issues, try Jakob Nielsen’s excellent book, Designing Web Usability:

This article was last edited on 9th April 2007. The author can be contacted using the form below.