Hyperlinks

Link syntax

Links take the person to another page, it goes somewhere. A link that goes to an external site should be identified as external link. Other websites have different code structures that cause keyboard and screen reader navigators effort to learn. If the href attribute is empty, consider making the anchor a <button>. A button performs an action as part of a web form.

All links require an href. If the link does not make sense with an href, use the <button> element instead.

a elements may not be empty, they must contain content.

Keep the underline to clearly indicate the interactive area and avoid using color only to indicate interactiveness. Ensure it’s visibly distinguishable from the surrounding content.

Valid href attribute values

https://

absolute path fully qualified (avoid linking to http sites, browsers may prevent people from accessing them)

//www

protocol relative (resolves to either https or http) at the beginning of the URL string

/

relative path to domain (preferred, implies https://www.url.com)

../../

relative path to specific file (not preferred)

tel:

for telephone numbers, use syntax +16126260000 with international code

mailto:

for email addresses (prefer web forms over exposing email addresses)

target attribute

The default behavior for a link is to replace the current page that is open in a browser tab. Using the target attribute on a link can change the default behavior.

The value to use the default behavior is target="_self". The other standard value is target="_blank". By changing the default behavior, it removes a person's ability to select the way they wish to engage with that link's destination. For instance, a link with normal behavior allows a person to right-click and open in a new tab or window. target="_blank" prevents a person from choosing how they prefer to open the link and forces a new tab.

In the case of web applications, such as an email client, a link opening to a new tab is expected. However, for websites, people expect default behavior and the ability to choose. Changing the expected behavior prevents interaction options.

An unexpected behavior may also cause confusion and frustration. For instance, the use of _blank, on a mobile device, may make content hard to return to, especially because browser interfaces on small screens make tabs unclear. This increases cognitive load for people to understand re-find content and removes them from their primary task.

Using the _blank value is not recommended.

Downloading files

If a link is to a file that the browser will need to download, include the download attribute. The value of this attribute is the name the file will be called on that person’s local device, regardless of the file name on the server.

Identify the file format in parentheses after primary link text.

Download example

<a href="/docs/marketing-flyer-v131.pdf" download="university-libraries-welcome">Welcome brochure (PDF)</a>

Basic link

<a href="https://www.lib.umn.edu">University Libraries</a>

External link (deprecated pattern)

Deprecated. Further discussion needed to determine how library websites might utilize this pattern.

External links have additional content applied to them to provide visual and screen reader cues that the behavior is different from internal links. The ext-site class adds a graphic icon after the text as well as adds the aria-describedby language that it opens a different site.

<a href="https://w3c.org" aria-describedby="ext-site">World Wide Web Consortium</a>

Link list

See list groups.

Action link

When linking to a web form, a link is appropriate but might benefit from looking like an action button. This is only appropriate if the linked page is a web form.

Action link example

<a href="//lib.umn.edu/request" class="link-action btn-secondary">
Request review
</a>

Described link

When highlighting content that stands alone on the page, use the described link style. For instance, a page highlighting all the services within a particular library may want to provide a brief additional explanation for each one before linking to the detailed service page.

To make the described link fit the full width of a space, use the .w-100 utility class.

Described link example

<a href="//lib.umn.edu/special" class="link-described">
 <span class="link-title">Archives and Special Collections</span>
 <span class="link-description">ASC collects and preserves an array of materials that support interdisciplinary research.</span>
</a>

Described link group example

<a href="//lib.umn.edu/apps/ac" class="link-described w-100">
 <span class="link-title">Assignment Calculator</span>
 <span class="link-description">Enter your due dates to get the steps of the research and writing process of your project.</span>
</a>
<a href="//lib.umn.edu/pim/citation" class="link-described w-100">
 <span class="link-title">Citation managers</span>
 <span class="link-description">Citation managers are software that keeps track of your citations, and formats them for your papers and bibliographies.</span>
</a>
<a href="//lib.umn.edu/interlibraryloan" class="link-described w-100">
 <span class="link-title">Interlibrary Loan</span>
 <span class="link-description">Request materials not owned by the Libraries from other libraries for free.</span>
</a>

Link grid

When a long list of links is necessary, the links may be displayed in a multi-column grid layout to condense the length. This was specifically designed to present a long list of relevant subject guides for a library.