Links: absolute and relative URLs, fragments and new tabs

Links are what make the web a web. The a (anchor) element connects your page to other pages, to sections of the same page, to files and to email addresses. Getting the URLs and the link text right makes a site easier to navigate and easier to move.

The a element

<a href="https://www.example.com/">Visit Example</a>

• href holds the destination URL.
• The content, Visit Example, is the link text. It is what people click and what screen readers announce.

An a without href is not a link. It is not focusable with the keyboard and does nothing when clicked. If something performs an action rather than going somewhere, use a button instead. The Web Accessibility Essentials course covers links versus buttons in detail.

Absolute URLs

An absolute URL includes the scheme and domain:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML docs</a>

Use absolute URLs to link to other websites. Always include https://; without it, the browser treats developer.mozilla.org/... as a relative path on your own site.

Relative URLs

A relative URL is resolved against the address of the current page. Use relative URLs for links within your own site, so they keep working when the domain changes, for example from a staging site to the live one.

Imagine this site structure, with the current page at /classes/sourdough.html:

/
  index.html
  about.html
  classes/
    sourdough.html
    rye.html
  images/
    loaf.jpg

<a href="rye.html">Rye bread class</a>
<a href="../about.html">About us</a>
<a href="/">Home</a>

Root-relative URLs that start with / are the most predictable on a real site, because they mean the same thing on every page. They do not work when you open files directly from your disk with file://, because the root is then the root of your drive. Use folder-relative paths for local practice, or run a local server.

Linking to a section: fragments

A fragment is the part of a URL after #. It points to the element with a matching id:

<nav aria-label="On this page">
  <ul>
    <li><a href="#ingredients">Ingredients</a></li>
    <li><a href="#method">Method</a></li>
  </ul>
</nav>

<h2 id="ingredients">Ingredients</h2>
<p>Flour, water, salt and starter.</p>

<h2 id="method">Method</h2>
<p>Mix, rest, knead, prove and bake.</p>

Clicking "Method" scrolls to the heading and updates the address bar, so the link can be shared or bookmarked. You can combine a page and a fragment: classes/rye.html#method. The special fragment #top scrolls to the top of the page.

id values are case-sensitive and must be unique. Choose short, readable ones that will not change, because other sites may link to them.

Email and phone links

<a href="mailto:hello@example.com">hello@example.com</a>
<a href="tel:+441179460000">0117 946 0000</a>

mailto: opens the visitor's email program and tel: offers to call the number on phones. Show the address or number as the link text, because many people use web-based email and nothing happens when they click a mailto: link. Use the international format in tel: links.

Downloads

The download attribute suggests the browser saves the file rather than opening it. It only works for files on the same origin as the page.

<a href="/files/price-list.pdf" download>Download the price list (PDF, 120 KB)</a>

Telling people the file type and size before they click is a courtesy, especially on mobile data.

Write link text that makes sense alone

Screen reader users often list all the links on a page, and everyone scans links. Text such as "click here" or "read more" is meaningless out of context.

<!-- Vague -->
<p>To book a sourdough class, <a href="/classes/sourdough">click here</a>.</p>

<!-- Clear -->
<p><a href="/classes/sourdough">Book a sourdough class</a>.</p>

Good link text describes the destination, is unique on the page where possible, and avoids raw URLs unless the URL itself is the point.

Opening a new tab

target="_blank" opens the link in a new tab or window:

<a href="https://example.com/terms.pdf" target="_blank" rel="noopener">
  Terms and conditions (PDF, opens in a new tab)
</a>

Use it sparingly. A new tab breaks the back button, can disorientate screen reader and mobile users, and takes control away from people who can already choose to open a new tab themselves. Reasonable uses include links from inside a form the visitor is part-way through, and help pages they need alongside a task.

When you do open a new tab, say so in the link text, as above.

Why rel="noopener"

A page opened with target="_blank" used to get a reference to the opening page through window.opener. A malicious page could use it to redirect your tab to a phishing page while the visitor was looking elsewhere. This is sometimes called "tabnabbing".

Current browsers treat target="_blank" as if rel="noopener" were set, which closes the hole. Adding rel="noopener" explicitly is still a harmless, clear statement of intent, and it protects visitors on old browsers. rel="noreferrer" goes further and also hides the referring page from the destination.

Summary

• a with href creates a link; without href it is not a link at all.
• Use absolute URLs for other sites and relative URLs within your own.
• #id fragments link to sections; mailto: and tel: start email and calls.
• Write link text that makes sense out of context.
• Open new tabs rarely, tell people when you do, and add rel="noopener".