This article originally
appeared in the Design and Usability Tactics e-newsletter. Click
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

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.