Links and Paths

Anchors, relative vs absolute, target, rel, and the magic of URLs.

Links are the verb of the web. Without them you have a brochure; with them you have a network. The <a> element looks deceptively simple but hides half a dozen footguns: paths that break in production, links that leak your tab to bad actors, and the difference between /about and about that beginners learn the hard way.

The basic anchor

html

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

<a> is the anchor element. hrefis the target URL. The text between the tags is what the user sees and what screen readers read aloud. That's the whole thing. Everything else is refinement.

Link text matters

"Click here" is the most-criticized link text on the web. Screen reader users often jump link-to-link out of context. "Read the docs" or "Download invoice" tells them where they're going. "Click here" doesn't.

Absolute vs relative paths

Three flavors of href show up everywhere:

Absolute URL: includes protocol and domain. https://example.com/about. Works from anywhere.
Root-relative path: starts with /. /about resolves to https://yoursite.com/aboutno matter what page you're on. Best default for internal links.
Document-relative path: no leading slash. about.html or ../sibling.html. Resolves against the current page's URL. Useful for static sites with nested files, dangerous everywhere else.

html

<!-- Absolute -->
<a href="https://example.com/docs">Docs (external)</a>

<!-- Root-relative -->
<a href="/about">About us</a>
<a href="/blog/2026/launch">Launch post</a>

<!-- Document-relative -->
<a href="contact.html">Contact</a>
<a href="../index.html">Up one folder</a>

The /about vs about gotcha

If you're on /blog/post/ and link to about (no slash), you go to /blog/post/about - almost certainly a 404. The slash matters. When in doubt, start with /.

Hash fragments (in-page jumps)

A # in a URL points to an element on the page by id. The browser scrolls there without reloading.

html

<a href="#pricing">Jump to pricing</a>

...

<section id="pricing">
  <h2>Pricing</h2>
</section>

Hash fragments also work across pages. /docs#install loads /docs and scrolls to #install. This is how every documentation site does in-page TOCs.

target="_blank": opening in a new tab

Add target="_blank"and the link opens in a new tab. Sounds simple. There's a security gotcha.

html

<!-- Wrong: leaks window.opener -->
<a href="https://example.com" target="_blank">Open</a>

<!-- Right -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open
</a>

Without rel="noopener", the page you opened can access the original tab via window.opener and silently redirect it. Modern browsers default to safer behavior, but you should still include noopener explicitly. noreferrer additionally hides the referrer URL.

Should every link open in a new tab?

No. Users have a back button; let them use it. Reserve target="_blank"for outbound links to other sites, PDFs, or anywhere you genuinely want to preserve the user's place. Internal navigation should not pop new tabs.

mailto and tel: the special schemes

Beyond http:// and https://, two more URL schemes show up often:

html

<!-- Opens the user's email client -->
<a href="mailto:hi@example.com">Email us</a>

<!-- With a pre-filled subject and body -->
<a href="mailto:hi@example.com?subject=Hello&body=I%20love%20your%20site">
  Email with template
</a>

<!-- Opens the dialer on mobile -->
<a href="tel:+15551234567">Call sales</a>

<!-- SMS -->
<a href="sms:+15551234567">Text us</a>

On desktop, mailto: opens whatever email client the user has configured. On mobile, tel:hands off to the dialer. These are tiny but powerful: one line of HTML and you've made a clickable phone number.

Try it

Edit the playground below. Add a link that jumps to the #contact section, and an outbound link to your favorite site that opens in a new tab.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Links practice</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav>
      <a href="#about">About</a> ·
      <a href="#contact">Contact</a> ·
      <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>
    </nav>

    <main>
      <section id="about">
        <h2>About</h2>
        <p>This is the about section. <a href="/blog">Read the blog</a>.</p>
      </section>

      <section id="contact">
        <h2>Contact</h2>
        <p>Email: <a href="mailto:hello@example.com">hello@example.com</a></p>
        <p>Phone: <a href="tel:+15551234567">+1 (555) 123-4567</a></p>
      </section>
    </main>
  </body>
</html>

Open Sandbox

Download links

The download attribute hints that the link target should be saved, not navigated to. You can suggest a filename:

html

<a href="/files/invoice-042.pdf" download>Download invoice</a>
<a href="/files/raw.csv" download="my-data.csv">Save as my-data.csv</a>

Only works for same-origin URLs (security). For cross-origin, the server has to send Content-Disposition: attachment.

Quick quiz

Quiz1 / 4

You're on /blog/post-1/ and write <a href="about">. Where does it go?

Recap

Absolute URLs include the domain. Root-relative starts with /. Document-relative resolves against the current page.
Prefer root-relative for internal links. Watch the leading slash.
#fragment jumps to an element by id on the same page.
Always pair target="_blank" with rel="noopener" (and usually noreferrer).
mailto: and tel: hand off to the user's mail client and dialer. download hints to save instead of navigate.
Write descriptive link text. "Click here" is a smell.