The Anchor Element: Turning Text Into a Link

Concept

The anchor element, a, is what makes hypertext hyper. It takes a piece of content and attaches a destination to it, so that activating the content takes the reader somewhere else.

It is the most important element in HTML. Search engines discover pages by following anchors. Screen reader users list every anchor on a page and pick one. Browser history, the back button, bookmarking, opening in a new tab, copying a URL - all of it exists because of this one element and stops working when it is faked with a script.

Syntax

<a href="destination">the text a reader sees and activates</a>

href - hypertext reference - is the destination. An anchor without an href is not a link at all: it is not focusable, not announced as a link, and not followed by a crawler. It is simply a span with a strange name.

Example

<p>
  Full instructions are in the
  <a href="/guides/installation">installation guide</a>.
</p>

<p>
  The figures come from the
  <a href="https://example.org/transport/2026"
     target="_blank"
     rel="noopener noreferrer">District Transport Review (opens in a new tab)</a>.
</p>

<a href="/products/kettle" class="card">
  <img src="/images/kettle.jpg" alt="" width="400" height="300">
  <h3>Two litre electric kettle</h3>
  <p>Boils in ninety seconds. Two year warranty.</p>
</a>

Explanation

The first link sits inside a sentence, and its text describes the destination on its own. The second points off site, opens in a new tab, and says so in the visible text, so no one is surprised when the back button stops working.

The third is a whole card wrapped in one anchor. Modern HTML permits an anchor to contain block content, which is exactly what a clickable card needs: one link, one tab stop, one announcement. The image carries empty alt text because the heading beside it already names the destination - repeating it would make the screen reader say the same thing twice.

Link text is the interface

Screen reader users routinely pull up a list of every link on the page and read it out of context. So does a crawler, roughly. Which means link text has to make sense alone.

The test is simple: read your link text with your eyes closed to the sentence around it. If you cannot tell where it goes, rewrite it.

target and rel

target="_blank" opens the destination in a new browsing context. Always pair it with rel:

<a href="https://example.org" target="_blank" rel="noopener noreferrer">External site</a>

• noopener stops the new page from getting a reference back to yours through window.opener, which was a real security problem and is now the default in modern browsers - but stating it protects older ones.
• noreferrer also withholds the referring URL.

Other rel values worth knowing:

Link or button?

This is a decision, not a style choice.

• A link navigates. It changes what document you are looking at. It is activated with Enter, can be middle clicked, and its URL can be copied.
• A button acts. It submits, opens, toggles, deletes. It is activated with Enter or Space.

Using the wrong one breaks keyboard behaviour and announces the wrong role. A <a href="#"> that runs a script is a link that goes nowhere: it is announced as a link, adds a history entry, and jumps the page to the top when activated.

Important rules

• Do not nest an anchor inside another anchor, or put a button inside one. Interactive elements must not contain interactive elements.
• An anchor with no href is not focusable and not a link.
• Never remove the focus outline without replacing it with something equally visible. Keyboard users navigate by it.
• Underlining is the one visual convention every reader already understands. Removing it from body copy links makes them hard to find, especially for readers who do not perceive colour differences.
• Tab order follows document order, so the markup order of your navigation is the order a keyboard reaches it.

Common mistakes

• Click here and read more, repeated down a page.
• <a href="#"> or <a href="javascript:void(0)"> used as a button.
• Opening every link in a new tab. It takes control away from the reader, who can already do it themselves.
• Not warning readers when a link opens a new tab, downloads a file, or starts a phone call.
• Making a whole paragraph one link, so the screen reader announces the entire paragraph as link text.
• Styling a span or a div to look like a link and attaching a click handler.

Best practices

• Write link text that names the destination in three to six words.
• Keep links visually distinct from ordinary text by more than colour alone.
• Reserve target="_blank" for genuinely disruptive cases - a PDF, a payment gateway, a form the reader is halfway through - and say so in the text.
• Use a real button for actions and a real a href for navigation, every time.
• Give links a large enough tap target on touch screens; roughly forty four pixels square is the usual guidance.

Practice

1. Take a page you have written and list every link out of context. How many still make sense?
2. Rewrite three read more links so each names its destination.
3. Build a card where the entire card is one link, with a heading, an image and a description, and check that a keyboard reaches it in exactly one tab stop.
4. Explain why <a href="#" onclick="save()">Save</a> is wrong in three separate ways.