turn off underline for hyperlinks

Perm url with updates: http://xahlee.org/js/hyperlinks_and_underline.html

Hyperlinks and Underline

Xah Lee, 2010-06-14

Today, i decided to change the css on my site so that links are not underlined.

I'm in the old school of thought that interface should be simple, and not change much. The default rendering of hyperlink with underline is established tradition since the first web browser in the early 1990s. It gives user a consistent recognition of links, everywhere.

Though, the underline rendering got problems. When many words are hyperlinks in a sentence, underline makes them less readable and obtrusive. As i write more and more and create more and more links, i become more aware of this problem.

After surveying 20 other popular websites, i find that they all do not use underline. Examples are: apple msn yahoo youtube amazon wikipedia time times npr... In fact, it would be hard to find a site that still use underline for links. (there are few exceptions. Typically, pages with simple layout or format still use underline. For example, google search, and some amazon.com pages.)

In browsing websites in the past 5 year, i don't remember ever got confused about where or which are links. I think this has been the accepted practice since perhaps 2005.

When the web begin, underline might be a good decision because there are not that much text, and no graphics, no css, no sites for news, shopping, stocks quotes, gaming, forums, social networks, youtube, etc. The only content is just about plain academic text and embeded simple images. But with today's web since about early 2000s, rendering underline to hyperlinks is not appropriate, since there are too much text in diverse and complex layouts (e.g. newspaper multi-column; menus; tabs, login boxes, drop downs, pop up snapshots ...). Underline all active links makes it unreadable.

Here's the css code to turn underline off. Underline will show only with mouse hover.

a:visited, a:link {text-decoration:none}
a:link:hover, a:visited:hover {text-decoration:underline}

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs