BLOG: In Defense of the Hyperlink Underline

CSS is great when it works. It lets you do all kinds of interesting things to HTML elements. You can even remove the most sacred of all things sacred, the underline of a hyperlink.

The very first Web site ever made had a hyperlink, and that hyperlink had an underline, so there's tradition to think about. But you want to keep the underline for more than just that.

For one thing, most hyperlinks are underlined. In fact, this is why removing the underline is so tempting. Designers like to lose the underline to make their sites unique, which is an important part of the designer's role. The Web would be much less interesting if every site used the same conventions.

There's just one problem. People who browse the Web are so used to the omnipresent underline that they click on anything that has one, even if it isn't a hyperlink. This is precisely why you should take great care not to underline elements that aren't hyperlinks. This is also why you should underline elements that are hyperlinks.

The Web is all about speed. People who like the Web like the ability to find information quickly. Moreover, Web surfers are skimmers. They don't actually read your text until they come to the information they want.

As a designer, you want to keep these facts in mind. You want your visitors to be able to move around your site with effortless speed, so you need something to attract their attention to the hyperlinks.

The underline works perfectly. Everyone knows that it indicates a hyperlink. It's easy to pick out, and your visitors don't have to think about it. Why ruin a good thing?

Besides, non-underlined hyperlinks compel your visitor to figure out what style convention you're using. Is it the boldface? The italic? The words in the colored boxes? Sure, it's obvious to you, but you're the designer. The learning experience is usually counterproductive to the browsing experience. In other words, your visitors can't leverage their knowledge about how the Web works to browse your site, which means that they can't tear through it at the blinding speeds to which they're accustomed.

By all means, design link states with CSS. Add boldface. Add italic. Change the typeface. Change the type size. Just think twice before you lose the underline.