Link Guidelines

Hyperlinks continue to be central to navigation on the web, such that not adhering to best practices can break the usability of your site or app.

When to use links

Links (originally called "hypertext links", then shortened to "hyperlinks", and now typically referred to just as "links") are the original way of navigating from one page to another on the web. They are ubiquitous on the web and common in web applications and web-like desktop apps.

Their strength lies in their simplicity. They can be embedded within blocks of regular text, allowing them to be read in context without interrupting the user's flow, while also indicating that content related to the linked text is available.

Additionally, as long as they are implemented correctly, they offer the advantage that they don't need much decoration to invite action (like buttons do). This is because they are so standard that users expect to be able to click on text that has a distinct color and/or is underlined.

Wikipedia is a showcase for the use of links:

Links can be used within chunks of text to indicate the presence of related content, but can also stand on their own to attract more attention, such as for primary or secondary navigation, as in breadcrumbs, menu bars or vertical navigation.

Hyperlinks, when used to navigate between or within pages or screens, are familiar and easy to use (with a mouse or keyboard, at least), so they can be used liberally. Although having too many redundant links on a page can reduce usability.

---

How to use links

• Links should be visually distinct from other items on the page (preferably using color and underlining; see this article for exceptions to this rule) and don't use that style for non-clickable items.¹
• More than one link style on a page is OK, but should done purposefully (e.g., one style for body text, another for header or footer text).
• Use the correct link markup for text that links to another page (i.e., the HTML <a> tag). Don't use javascript to perform an action on click.
• Use a different color for visited links.²
• Link text should make sense on its own (e.g., don't write "click here").³
• Link text should be as succinct as possible.⁴
• Use link titles (via the HTML "title" attribute) to help users predict where a link will lead before they click it, unless it's obvious.⁵ On the web, these can function as tooltips.
• Consider using an outgoing (external) link indicator when linking to pages outside of your domain (see variations below for an example).⁶
• Avoid using text links to trigger actions.⁷ They should be primarily used for navigation.
• Ensure sufficient contrast between link colors and their background.⁸

Basic usage

States

• Default - A normal, unvisited link.
• Hover - Occurs when the user mouses over it.
• Active - Occurs the moment it is clicked.
• Visited - A link the user has visited.

As described above, it is important to have a distinct default link style and a separate style for visited links.⁹ The other link states are "active" and "hover". But note that hover is not available on mobile devices, so don't rely on it.

Variations

It can be helpful to indicate links that go to external sites using a small icon, such as the one below.

References

1. Nielsen Norman Group
2. Nielsen Norman Group
3. Nielsen Norman Group
4. Moz
5. Nielsen Norman Group
6. Welie.com
7. KDE Human Interface Guidelines
8. U.S. Web Design System
9. CSS Link styles

---

Related controls

• Buttons
• Breadcrumbs
• Tooltips

---

Further reading

• The Same Link Twice on the Same Page: Do Duplicates Help or Hurt? (Nielsen Normal Group)

---