HTML Links: The a Element, href, target and Writing Good Link Text

Links are what make the web a web: they connect pages to each other. The "HyperText" in HTML means text with links. In HTML, a link is an <a> (anchor) element.

Creating a link#

<p>Read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML guide</a> for reference.</p>

• <a> creates the link.
• href (hypertext reference) is the destination URL.
• The content between the tags is the clickable link text.

Browsers show unvisited links blue and underlined by default, and visited links purple. You can change this with CSS.

Where links can point#

Absolute and relative URLs have their own lesson: Absolute and Relative URLs. Section, email and phone links are in Page Anchors, Email and Phone Links.

Opening in a new tab#

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

<a href="https://www.w3.org/" target="_blank">W3C website</a>

Use it sparingly. People can already choose to open a link in a new tab, and unexpected new tabs are confusing, especially for screen reader users. A good use is a link that would interrupt a task, such as a help page opened from the middle of a form. When you do use it, consider saying so in the link text, for example "Help (opens in a new tab)".

Modern browsers treat target="_blank" links as if they had rel="noopener", which stops the new page from controlling the original one. You may still see rel="noopener noreferrer" written out in existing code; it is harmless.

Linking an image#

Any inline content can be a link, including images. The image's alt text then becomes the link's name, so describe where the link goes:

<a href="https://en.wikipedia.org/wiki/Mango">
  <img src="/lesson-assets/mango.svg" alt="Read about mangoes on Wikipedia" width="160" height="160">
</a>

Writing good link text#

Link text should make sense on its own. Screen reader users often list all the links on a page, and "click here" repeated ten times tells them nothing.

<!-- Vague -->
<p>To see our prices, <a href="/pricing">click here</a>.</p>

<!-- Clear -->
<p>See our <a href="/pricing">pricing plans</a>.</p>

• Describe the destination: "pricing plans", "download the brochure (PDF, 2 MB)".
• Avoid "click here", "read more" and "link".
• Do not use the full URL as text unless people need to see or copy it.

Other useful attributes#

<a href="/files/timetable.pdf" download>Download the timetable (PDF)</a>

Links versus buttons#

Use a link (<a href>) when the user goes somewhere: another page or another part of the page. Use a button (<button>) when the user does something on the current page, such as submit a form, open a menu or add an item to a cart. Using the right element gives keyboard and screen reader users the behaviour they expect. Buttons are covered in Buttons.

Common mistakes#

Practice#

<p>The official reference is the <a href="https://html.spec.whatwg.org/">HTML Living Standard</a>.</p>
<p><a href="https://www.w3.org/WAI/" target="_blank">Web Accessibility Initiative (opens in a new tab)</a></p>

Key takeaway#