This article originally appeared in the Design and Usability Tactics e-newsletter. Click here to subscribe automatically.
The HTML standard recognizes three separate states for hyperlinks: normal, active, and visited. Browsers normally assign different colors to each hyperlink state, and you can use attributes (link, alink, and vlink) of the <body> tag to override those defaults for a given Web page. For even more control over link styling, you can use CSS pseudoclasses to create selectors that enable Web builders to control the styling for the same three hyperlink states, as well as the hover state. These pseudoclasses are as follows:
- Link is the normal, unclicked state of a hyperlink.
- Active is a hyperlink that has been clicked and is currently being fetched by the browser.
- Visited is a link to a page that has been visited recently.
- Hover is the hyperlink under the mouse pointer.
The distinctive styling of the different hyperlink states does more than just distinguish the hyperlinks from the surrounding text on a Web page—it's intended to provide visitors with visual feedback on the status of each link. A link changes color when it's clicked to show that the browser is actively loading that page. Links to previously visited pages appear in a different color to show the visitors where they've been. And a CSS style for the hover pseudoclass is what creates the popular rollover effect that highlights a hyperlink as the mouse pointer passes over it.
Visited link styling as a usability issue
Web builders who don't want to accept the browser defaults usually create styles for the link and hover states of the hyperlinks on their sites, but they often ignore the active and visited states. A common approach to styling hyperlinks is to make the visited state the same as the link state and either ignore the active state completely or style it the same as the hover state. This approach simplifies the page (and its style sheet) by reducing the number of text colors, but it blurs potentially important distinctions between the link states.
Usability pundit Jakob Nielsen admonishes readers of his Alertbox column to always use a distinctive color and underlining to differentiate links from surrounding text, and always use a different color for visited links. His argument is that distinctive styling for visited links is essential to enable visitors to put their browsing in the proper past, present, future context. Without a different color for visited links, site visitors get confused and tend to move in circles, revisiting previously visited pages. He says that his research shows that 74 percent of Web sites use distinctive coloring for visited links, so it's a convention that visitors have learned to expect and rely on.
A flexible approach to link styling
Nielsen's arguments in favor of distinctive styling for visited links have a lot of merit. It's true that haphazard link styling makes Web pages harder to use—particularly on sites that almost hide the links. However, I think his recommendations for link styling are rather rigid. I prefer a somewhat more flexible approach.
First of all, I make a big distinction between links embedded in body text and stand-alone links in navigation bars, link lists, and so on. Nielsen acknowledges that links in navigation bars may be an exception to the general guidelines, but I think of them as a completely separate case.
For links that are embedded in text, I usually use some combination of color, bold, and underline (not all three) to make the links stand out from the surrounding text. I don't feel compelled to adhere to default link styling of blue text with an underline. Often, I select a different (brighter) shade of the primary text color instead of introducing a completely different color. To reinforce the fact that the link is an interactive element, I usually create a strong rollover effect via a hover style.
Separate styling for visited links depends on the site content. If the content tends to lead visitors to branch off to other pages and then return, or if links to the same pages appear in different contexts on different pages, then I use different styling for visited links. The typical styling is another shade of the primary text color (usually dimmer than the text or link colors). On the other hand, if site navigation is simple and linear, with little chance of confusion about which pages have been visited, then I sometimes style visited links the same as standard links in order to achieve a cleaner, simpler page design.
Whatever the link styling, it's important to be consistent throughout the site and to avoid confusion by reserving the link styling exclusively for links and not use it for any other text.
Styling links in navigation bars
Links in navigation bars, buttons, and lists of links are fundamentally different from links embedded in text. Where a link sits alone or among other links instead of being surrounded by body text, the link's context often makes it obvious that it is a link. I don't think distinctive styling is necessary in such circumstances. Most site visitors will instantly recognize that the text items in a navigation bar are links, regardless of the styling. The same goes for the boxed text of a CSS button or a list of links in a sidebar.
When your navigation links are obviously and unequivocally identified by their context, you can safely abandon the usual stylistic clues that identify links in body text. Instead, you can concentrate on developing a separate style scheme that makes sense for those navigation links. When styling navigation elements, a good rollover effect (hover state) helps to reinforce the identity of the links as interactive elements. A different style for visited links in a navigation bar doesn't seem necessary or even desirable in most circumstances, but a separate treatment for the link to the current page (a You Are Here button) can help orient visitors to their current location in the site.