Links and Anchor Tags

The <a> (anchor) tag is what makes the web a web — it's how one page points to another.

Basic links

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

The href attribute ("hypertext reference") is the destination. Clicking the text between the tags navigates the browser there.

Relative vs. absolute URLs

<!-- Absolute: full URL, works from anywhere -->
<a href="https://example.com/about">About</a>

<!-- Relative: resolved against the current page's location -->
<a href="/about">About</a>
<a href="about.html">About</a>
<a href="../contact.html">Contact</a>

Relative URLs are what you'll use for links within your own site — they keep working no matter what domain the site is deployed to.

Opening links in a new tab

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

target="_blank" opens the link in a new tab. When you do this, always add rel="noopener noreferrer" — without it, the new page can access window.opener and manipulate the tab it came from, which is both a security and performance concern.

Linking to a section on the same page

Give an element an id, then link to it with #id:

<h2 id="faq">Frequently Asked Questions</h2>

<!-- elsewhere on the page -->
<a href="#faq">Jump to FAQ</a>

This works across pages too — about.html#faq jumps straight to that section after loading the page.

Email and phone links

<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+15551234567">Call us</a>

mailto: opens the user's default email client with the address pre-filled; tel: triggers a phone call on devices that support it (mobile phones, mostly).

Links that aren't text

An <a> tag can wrap any content, not just text — an image, a card, even a group of elements:

<a href="/product/123">
  <img src="product.jpg" alt="Wireless headphones" />
  <span>Wireless Headphones — $59</span>
</a>

This is a common pattern for clickable product cards, article previews, and navigation items.