Links and Navigation

Links are what make the web a web — a page on its own is just a document, but pages connected by links become something you can navigate between. This lesson covers the anchor element in the detail it deserves, because it's easy to use badly without realising it.

The anchor element

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

<a> wraps whatever should become clickable — usually text, sometimes an image (covered next lesson) or a whole block of content. href (hypertext reference) is the destination.

Relative vs absolute paths

An absolute URL includes the full address — protocol, domain, everything:

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

A relative path is resolved against the current page's location instead of spelling out the whole domain:

<a href="about">About</a>       <!-- relative to the current folder -->
<a href="/about">About</a>      <!-- relative to the site root -->
<a href="../pricing">Pricing</a> <!-- up one folder, then into pricing -->

The difference between about and /about matters and is a common source of broken links. If the current page is example.com/blog/post:

• href="about" resolves to example.com/blog/about — it's relative to the current folder (blog/), not the domain root.
• href="/about" resolves to example.com/about — the leading slash makes it root-relative, ignoring whatever folder the current page happens to be in.

For links within your own site, root-relative paths (/about) tend to be more robust, because they resolve the same way no matter which page they're placed on. Absolute URLs are for linking to other sites entirely.

Linking to a section of the same page

Give the target element an id, then point a link at # followed by that id:

<h2 id="pricing">Pricing</h2>
<!-- ... further down the page ... -->
<a href="#pricing">Jump to pricing</a>

Clicking that link scrolls the page so the element with id="pricing" is in view — no JavaScript required. id values must be unique within a page; if two elements share one, the browser will target whichever it finds. This same #fragment syntax also works pointing at another page — page.html#pricing jumps to that section after loading page.html.

Opening a link in a new tab, safely

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

target="_blank" opens the link in a new tab instead of navigating away from the current one. On its own, this has a real security problem: the page you just linked to is given a live JavaScript reference to your original tab, via window.opener. That means the new page's script can silently redirect your original tab to a different URL — commonly a convincing fake login page — while you're looking at the new tab. This is a real, documented phishing technique called tab-nabbing.

rel="noopener" fixes it by telling the browser not to hand over that window.opener reference at all. rel="noreferrer" is often paired with it, which additionally stops the referrer information (which page you came from) from being sent to the destination — a minor privacy improvement, not a security fix in itself. The combination rel="noopener noreferrer" is the standard, safe way to write target="_blank".

mailto: and tel: links

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

mailto: opens the visitor's default email application with a new message addressed to that address. You can prefill more of the message with query parameters:

<a href="mailto:hello@example.com?subject=Question&body=Hi there">
  Email with a prefilled subject
</a>

tel: triggers a phone call on devices that can make one — mobile phones, mainly. On a desktop with no calling capability it typically does nothing useful, but it costs nothing to include and helps mobile visitors a lot, so it's worth using on any page with a phone number.

Try it yourself

What to remember

• href="/path" is root-relative; href="path" is relative to the current page's folder.
• #id links jump to whichever element on the page has that id, no JavaScript needed.
• Always pair target="_blank" with rel="noopener noreferrer" — without it, the new page can hijack your original tab.
• mailto: and tel: open the visitor's email or phone app directly from a link.