devnotes.

The Anchor Tag & href

The <a> (anchor) tag is what turns text or images into clickable links, using the href attribute to specify the destination.

<a href="https://example.com">Visit Example.com</a>
<a href="/about">About Us</a>
<a href="contact.html">Contact Page</a>

There are three common types of href values:

  • Absolute URL: https://example.com — a full web address, used for linking to external sites.
  • Root-relative path: /about — starts from the domain's root, regardless of which page you're currently on.
  • Relative path: contact.html or ../images/logo.png — resolved relative to the current page's location.

By default, links open in the same tab. To open in a new tab, add target="_blank" — and when you do, it's best practice to also add rel="noopener noreferrer" for security, since the new tab could otherwise access and manipulate the original page.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>

Links can also wrap other elements, not just text:

<a href="/products">
  <img src="product-thumb.jpg" alt="View our products">
</a>