Problem

A function must be provided to allow access to related content from arbitrary locations within a page.

Solution

Links are content-only items which provide access to additional information, generally by:

Links are almost purely hypermedia elements. While not invented by the Web, and not exclusive to it, the ubiquity of websites and links can serve as a good guideline for display standards and use of the pattern.

Links are generally found in content-rich areas, when used in application or OS contexts. Links to additional information within explanatory text, or for cross-referencing within help systems, are common uses. Most other text found within

Variations

Two types of links may be encountered:

Inline links are ... underlined (text) or bordered (images), etc.

List ... often with a marker, but typically not a unique one, so the text is the identifier, and therefore it must follow link standards; often not underlined as this would be cumbersome... HOW TO UNIVERSALLY DENOTE IT'S A LINK????

Interaction Details

Click states... hover (except for hoverless systems like touch), down, loading, visited, etc.

Presentation Details

Inline links should always be a different color from any styled text, and be underlined. While other styles may work, they will need to be learned.

LINK COLORS????

The title for each link should be unique, clearly communicate the information on the target, and be easily scannable.

Additional information, in text or as a graphic, should be included after the link to communicate when an atypical target is presented. When a link leaves a site, loads a new application, or will initiate a file download, indicate this. Any reasonable icon after a link will usually be interpreted correctly. Text should have the file size when downloadable, and the type of file, such as: (384 kb PDF).

Antipatterns

Do not use links to activate functions. Even within a web page, use buttons and other form elements for action behaviors.

Avoid using generalized terms like "Click here." When needed, use this as explanatory text and make the link a more descriptive term, e.g. "Click to view the manual."

Do not use underlines for any other elements on the page. User-defined styles may still be allowed when editing text.

Examples