HTML Links

The <a> (anchor) element creates a link. Its href attribute (hypertext reference) sets the destination.

<a href="/about">About us</a>

Linking to pages

<a href="/about">Relative link, same site</a>
<a href="https://example.com">Absolute link, another site</a>
<a href="#section-2">Link to a section on the same page</a>
<a href="mailto:hello@example.com">Email link</a>
<a href="tel:+15551234567">Phone link</a>

A relative link (/about) points within your own site. An absolute link (https://example.com) includes the full address and can point anywhere.

Opening links in a new tab

By default, a link opens in the current tab. Add target="_blank" to open it in a new tab:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit example.com
</a>

Always pair target="_blank" with rel="noopener noreferrer". Without it, the new page can access window.opener and redirect your original tab, a real security and phishing risk. noreferrer also stops the destination site from seeing where the click came from.

Use target="_blank" sparingly. Taking control over whether a link opens in a new tab away from the user can be disorienting, especially for screen reader and keyboard users who won’t get the usual visual cue that a new tab opened.

Writing good link text

Screen reader users can pull up a list of all links on a page, out of context. Link text needs to make sense on its own.

<!-- Avoid: meaningless out of context -->
<p>Our new pricing is here. <a href="/pricing">Click here</a>.</p>

<!-- Better: link text describes the destination -->
<p>Check out <a href="/pricing">our new pricing</a>.</p>

Avoid href="#" as a placeholder. It creates a link that goes nowhere and can jump the page to the top unexpectedly. If you don’t have a real destination yet, use a <button> instead, or leave a comment for yourself.

Buttons vs links

Links and buttons look similar and are often styled the same way, but they do different jobs:

A link (<a>) navigates, it takes the user to a new page or a new location on the same page.
A button (<button>) performs an action on the current page: submitting a form, opening a menu, toggling something.

<!-- Navigates to another page -->
<a href="/cart">View cart</a>

<!-- Performs an action on this page -->
<button type="button">Add to cart</button>

This distinction matters for more than semantics. Browsers give the two elements different default keyboard behaviour: buttons activate with both Enter and Space, links only with Enter. Screen readers announce them differently too (“link” vs “button”), which tells users what to expect before they interact.

A common mistake is making a <div> or <span> clickable with JavaScript instead of using a real <a> or <button>. That element gets no keyboard support, no focus state, and no screen reader announcement for free, you’d have to rebuild all of it yourself. Use the real element and you get all of that automatically.

Common mistakes

Using <a href="#"> or <a href="javascript:void(0)"> to trigger JavaScript actions. Use <button> instead.
Forgetting rel="noopener noreferrer" on target="_blank" links.
Non-descriptive link text like “click here” or “read more” repeated across a page.

FAQ

Should every button be a <button> element?

Yes, unless it navigates to a new URL, in which case it’s a link styled to look like a button. The underlying element should match what it does, not what it looks like.

Do links need visible focus states?

Yes. Keyboard users tab through links, and they need to see which one is currently focused. See CSS Pseudo-classes: :focus for how to style it, and don’t remove the default outline without replacing it.