Tutorial 25: The Care and Feeding of Hyperlinks, Part I - HTML with Style | 6
Tutorial 25: The Care and Feeding of Hyperlinks, Part I
Dress them up in pretty clothes
The styling of your links is very important in aiding the usability of your site. Since time immemorial, links have traditionally been blue and underlined, and visited links have been purple and underlined. If it fits the color scheme of your site, it's a good idea to stick with these guidelines. However, blue and purple are not always suited for a site, so you might want to change these colors. Remember, however, to be consistent throughout your site, so that users get a chance to get used to the new colors you've used. It's also useful to color visited links with a slightly darker color than normal ones, but a color that is similar (choose a color with less brightness and a slightly different hue in the HSV color space). Also consider the color of the links compared to the background color and the color of the surrounding text; links aren't much use if the user can't see them.
Never, ever, ever remove the underline from links. That underline is the first and most important clue for a user that the text is a link to something. Although users are generally smart people and will figure out that a link is a link one way or another, it will be less intuitive if you decide to just color the links differently or have them in bold.
If you're using an image or an imagemap for a link, you should try to stick with the look for text links. It's generally a good idea to avoid icons and stick with text, which is much more descriptive. If you must use an icon, color it the same as the rest of the links in your page. And if you use any sort of image, making it look like a button will aid the user in identifying it as a link.
Text labels on such buttons should have an identical look to links. This includes the underline, which makes it patently obvious that the graphic is a link to something. Consider the following two examples:
Both links contain the same information. However, the second one has a button-like look, enforcing the idea that the user can click on it, and contains blue underlined text, indicating that it is a link to something. If these graphics are surrounded by other graphics and text with the same yellow background, the one on the left will not stand out as a link, and will be ignored by many users.
URL: https://www.webreference.com/html/tutorial25/5.html
Produced by Stephanos Piperoglou
Created: September 27, 2000
Revised: October 4, 2000
Find a programming school near you