Link

A link (or hyperlink) is text that directly takes users to another site by clicking on it. Internal links lead to another part of the same site, while external links that lead to an external site.

Anatomy

1. Link text
2. Icon

 

When to use

• To navigate to a different page within the application or to an entirely different site
• To jump to an element on the same page
• To link to emails or phone numbers

 

When not to use

• For actions that will change data or manipulate how it is displayed, change a state, or trigger an action (use a button instead)

 

Best practices

Clearly identify external links

This is especially important when a link will take users to a non-government site. OMB’s Policies for Federal Agency Public Websites and Digital Services [PDF, 1.2 MB] states that agencies “must clearly identify external links from their websites” and that they “should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.”

 

If you use an external link indicator, use it consistently for all text links

If your project uses an icon or other external link indicator, use it for all text links across the site. If external link indicators are used, users will expect that text links without an indicator are internal links.

 

Don’t rely on color alone to distinguish links

Users should be able to distinguish text links from surrounding text. Text links not distinguished with an underline need a contrast level of at least 3:1 with their surrounding text and should show an underline on hover.

 

Show file type and size for links to downloadable content

When possible, create a webpage instead of linking to a file. If it's necessary to link to a file, tell users ahead of time that the link may trigger a file download and show the size and format of that file.

 

Write out and encode email and phone links

Write out email addresses and phone numbers so users can read or copy this information without selecting the link.

Some browsers don’t automatically display a clickable link for email addresses or phone numbers, so encode email and phone links with  mailto: and  tel:. Include the country code in phone numbers to support international users.

 

Check with your security contact regarding email link best practices

While displaying email addresses and phone numbers provides a better experience for users, it can increase spam for the email recipient. One approach is to use a group email to protect individuals. The email address will remain the same even as staff and organizational structures change. Also consider using a contact form instead of showing email addresses.

 

Related components

Button

Use unique, meaningful link text

Link text should explain the link’s purpose and describe the destination where users will go if they follow the link. Vague and repetitive text like “click here” or “read more” is particularly unhelpful to those using screen-reading software. These users are more likely to focus on link text only. Screen-reading software has a feature to collect all page links into a single list; in these lists, links that aren’t unique aren’t differentiable. 

 

Keep text short

In most cases, try to limit link text to three words or fewer. Avoid using the web address itself as the link text.

Guidelines for Visualizing Links, Nielsen Norman Group

U.S. Web Design System (USWDS)