Links

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 default 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 +16129990000 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 default target value is target="_self". The other common value is target="_blank", which opens the link in a new tab or window. 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.

Unexpected behavior may cause confusion and frustration. For instance, _blank on a mobile device may make content hard to return to because browsers on small screens hide tabs. This increases cognitive load for people to re-find content and removes them from their primary task.

Because of these reasons, 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="new-resident-welcome">Welcome brochure (PDF)</a>

Basic link

<a href="https://www.webaim.org">WebAIM</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="/request-form" class="link-action">
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">Mystery</span>
 <span class="link-description">Also called detective fiction, this book genre is characterized by a gripping plot that revolves around a mystery and has a crime that must be solved by the protagonist.</span>
</a>

Described link group example

<a href="/memoirs" class="link-described w-100">
 <span class="link-title">Memoirs and autobiographies</span>
 <span class="link-description">Memoirs and autobiographies provide a true account of the author’s life. They differ in that an autobiography provides a chronological account of your life’s events and accomplishments, whereas a memoir puts the emphasis on only the most defining, emotional moments.</span>
</a>
<a href="/history" class="link-described w-100">
 <span class="link-title">History</span>
 <span class="link-description">The books in this genre lay down the known facts about a historical era, event, or figure. And since this is nonfiction, all the facts have to be accurate (though that doesn’t mean there’s no room for inference or opinion).</span>
</a>
<a href="/humor" class="link-described w-100">
 <span class="link-title">Humor</span>
 <span class="link-description">Laugh-out-loud memoirs by the funniest celebs, satirical essays from the likes of David Sedaris, or gag gifts like How to Adult — all the books in this rib-tickling genre are written with one thing in mind: making readers laugh.</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 guides.