Journey

Links are the connective tissue of the web. With the humble link, you can direct users further down the same page, deeper within a site, or elsewhere altogether. Links make the web what it is, and elevate it from being a disparate, unconnected collection of documents stored on millions of servers.

Anatomy #

Content #

For users to discover a link, there must be content within the <a> link container. In simple links, this is most often a brief bit of copy, but link content can also be an image, a button, or even a more complex component like an entire table row or card.

The link’s content should create reasonable expectations for what the user can expect when the link is clicked. When using text, consider adding links organically to copy as written instead of using generic phrases like “Click here”, “Continue” or “For more info.”

URL (href) #

The universal resource locator or URL goes in the href attribute of the <a> link tag. Links go in the href tag and may go to external sites, internal pages, or anchors within a page. Additionally they may be used to invoke other applications like mail, phone, or custom third-party apps.

External #

<a href="https://uxcellence.com/about/">External link</a>

External links direct users to another site, directory, or document on another server. External links will generally include:

• the protocol (generally https:// or http:// most of the time)
• the domain, which is akin to the “name” of the site or server, along with the top-level domain or TLD (and potentially includes different subdomains)
• a port in some cases (when the site or server doesn‘t use the general http port)
• a directory path for files that don‘t live at the main root of the site
• a file name that represents the actual page or document
• a query string that may include multiple parameters
• and finally an internal anchor that can link to a specific place within the document

Internal #

<a href="/foundations/">Internal link</a>

These link to another page or directory within the current site. The best practice for internal links is to use a relative link, rather than one including all of the information for external links.

Anchor #

<a href="#attributes">Anchor link</a>

An anchor link uses the #link-id data to direct the user to another part of the same page. (It can also be used with external and internal links to get to specific sections of the linked page, provided the necessary ID exists in the document.) In order for an anchor to properly link to a section, a single element in the document needs to have the corresponding id="link-id" attribute.

Other links #

In rare cases, you can also use an email address or phone number in the href to create a link that will generate a new email in the user‘s default mail client or start a phone call. These start with the mailto: and tel: protocols rather than https://.

<a href="mailto:email@address.com">Email email@address.com</a>
<a href="tel:+18005550100">Call (800) 555-0100</a>

Some apps can also create their own link protocols, though it can be tricky to guarantee that users (particularly from a website, which can be accessed anywhere) will be able to open app-specific links on their device.

Attributes #

Other optional attributes of the <a> link tag include the following:

• rel: This can be used to specify the relationship between one page and another. A common example is specifying rel="me" or rel="author" to verify that a link relates to the author of that page. (Using rel="me" can be useful in the context of the Indie Web for verifying your identity on other systems.) Other options might include next and prev to denote links in a sequential order, external to explicitly call out external links, and more.
• target: This is used to determine where to open a link based on the current browsing context. Most commonly, target="_blank" will open the link in a new tab or window, depending on the user‘s preferences.
• title: As a global attribute, title can be used on most elements though it’s rarely required. For links, it can be useful to provide the actual title of a website, document, or file you are linking to in order to give more useful context to your users.

Design considerations #

Most commonly links will appear inline within bodies of text, but they may occasionally be part of a more complex component like cards. Here are a few things to consider when placing links:

Use descriptive link content #

Avoid using uninformative phrases like “click here”, “read more”, “link” or “info” for links. If possible, write good link content so that links either name the document they direct users to, give a summarized context, or otherwise describe what users can expect.

Avoid nesting links #

Don’t place links within other links or other interactive elements. For instance, don’t place a link around the text within a button. If a card functions as a single cohesive link, don’t place other interactive elements or separate links within that card.

Provide informative download links #

When linking to files for download, tell users what file type the download is as well as the general file size. This helps them make an informed decision as to whether they should download it in their context or not. (For instance, they likely won’t want to start a large software download of an .exe file on their phone.)

Provide any other additional details they might need to make an informed decision. If the file is meant for specific platforms, tell users what platform it’s for.

Links can be buttons #

There may be times when there’s a specific action you want to drive users to take. Even if that’s just going to a follow-up page or downloading a file, it can be helpful to use button styles on a link to highlight the most important link(s) on a page as visual elements. That said, don’t make every link a button.

Accessibility #

As the most important interactive element on the web, do everything you can to make links accessible and easy to use.

Color AND style contrast #

Links should be visually distinct from the content around them so they are obvious as interactive elements.

Take care to test link colors to make sure they comply with WCAG color contrast standards so they can be sufficiently distinguished against the given background color. But don’t rely on color alone to distinguish links from content around them. If you only rely on color, then color blind users may not be able to distinguish links from text. Underlines are the most common additional style; in fact, they’re common enough that it’s commonly recommended not to use underlines for non-linked text.

Focus states #

Ensure that all links receive and show focus when users navigate through a site using their keyboard. Design intentional focus states so that it’s clear where on the page a user has navigated.