Link State Possibilities in a Web Site

- Available/at rest

- Available/rollover

- Active

- Visited

- Current

We will look at an overview of each state in the sections that follow. Later in the article we will see exactly how to use affordances to indicate state in both navigational text and graphic links. Note that you don’t necessarily need to indicate all link states, but be consistent from page to page to avoid bewildering visitors.

Available/At Rest State

Available/at rest links exhibit the default state, shown as the page is initially rendered, without a mouse positioned over the link. The default color for text links and image link borders is blue in most browsers. This color can be changed in the <body> tag with the link attribute, and virtually all link attributes (color, underline, etc.) can be styled with CSS’s a:link pseudo-class.

Available/Rollover State

Available/rollover refers to the state of a link when the mouse is positioned over it. Rollover effects can’t be rendered with HTML alone, but the CSS pseudo-class a:hover can specify text-link rollovers, and JavaScript can implement image rollovers (essentially image swaps).

Active State

An active link is one that was just immediately clicked. The latter effect shows only briefl y, while the new page is loading, but it does give useful feedback to reassure the visitor that the click was recognized. Red is the default active color for text links and image link borders in most browsers, but it can be changed in the <body> tag with the active attribute, and virtually all link attributes (color, underline, etc.) can be styled with CSS’s a:active pseudo-class.

Visited State

A visited link is one that has been recently visited. Purple is the default visited color for navigational text in most browsers, but it can be changed in the <body> tag with the visited attribute, and virtually all link attributes (color, underline, etc.) can be styled with CSS’s a:active pseudo-class.

Indicating visited links is most important for larger sites that visitors want to explore systematically, such as a list of articles on a particular subject. In contrast, indicating visited links on sites where visitors are more likely to return to the same link repeatedly would seem to do little more than add visual clutter.

Avoid using a glaringly obvious color for visited links, because too much contrast adds even more visual clutter to the page. Instead, the color should be subtly but noticeably different from the standard link color. A less saturated (less bright) version of the standard color is usually appropriate, as long as the text is still legible against the background color.

Current State

The current link isn’t truly a link, because it shouldn’t actually be clickable. That is, we keep the item on the menu, but we remove the link affordances and the surrounding <a> tag, thereby disabling the link. We are saving our visitors from needless page reloads due to accidental clicks.

Why, then, don’t we just remove the link from the menu structure entirely? Because the disabled link serves as a placeholder for the current page; a “you are here” marker, if you will, and also ensures that the menus on all pages look exactly alike. Otherwise, we would risk muddling our visitor’s mental model of the site structure.

Disclaimer

The ArticleCity.info articles directory team is not responsible for falsehoods, inaccuracies, or any other types of misinformation this article may contain and will not be liable for any damage or loss suffered by a user through the user's reliance on the information gained here.