Link Destinations & Behaviour
Beyond href, links have attributes that control how they relate to the current page, where they open, what's sent to the destination, and how they look in their different states. This lesson also covers URL anatomy and the <base> element.
Anatomy of a URL
https://shop.example.com:443/products/lamp.html?color=red&size=m#reviews └─┬─┘ └──────┬───────┘└┬┘└────────┬────────┘└────────┬───────┘└──┬──┘ scheme host port path query fragment
| Part | Meaning |
|---|---|
| Scheme | Protocol: https, mailto, tel, file |
| Host | The server's domain name |
| Port | Usually omitted (443 for HTTPS, 80 for HTTP) |
| Path | Which resource on the server |
| Query string | key=value pairs after ?, separated by & — used for searches and filters |
| Fragment | After # — a location within the page; never sent to the server |
In HTML, write & in URLs inside attributes as & to be strictly correct, though browsers accept a bare & too. Spaces and special characters in URLs must be encoded, e.g. a space becomes %20.
The rel attribute
rel describes the relationship between the current page and the link's destination:
| Value | Meaning |
|---|---|
noopener | The new page can't access this page via window.opener |
noreferrer | Don't send the Referer header (also implies noopener) |
nofollow | Don't pass search ranking to this link (used for untrusted links) |
sponsored, ugc | Paid/affiliate links, and user-generated content like comments |
external | The destination is a different website |
next, prev | Pages in a series |
me | The destination also represents you — used to verify profiles on social sites |
Several values can be combined, separated by spaces.
Targets
target | Opens the link in… |
|---|---|
_self (default) | The current tab |
_blank | A new tab or window |
_parent / _top | The parent frame / the whole window, when inside iframes |
| A name | A named iframe or window, e.g. target="preview" |
Referrer policy and ping
When you follow a link, the browser normally tells the destination which page you came from. referrerpolicy controls this per link:
<a href="https://example.com" referrerpolicy="no-referrer">Private link</a> <a href="https://example.com" referrerpolicy="origin">Send only our domain, not the full URL</a>
hreflang and type
<a href="/pt/" hreflang="pt" lang="pt">Ler em português</a> <a href="manual.pdf" type="application/pdf">User manual (PDF)</a>
hreflang states the language of the destination; type hints at its file type. Both are advisory.
The base element
A <base> element in the head sets the starting point for every relative URL on the page, and optionally a default target:
<title>Docs</title> <base href="https://docs.example.com/v2/" target="_blank">
With this, <a href="install.html"> goes to https://docs.example.com/v2/install.html. Because it affects every relative link — including #fragment links — <base> often causes surprises and is rarely used.
Link states and styling
Browsers style links in different states, and CSS can target each one:
Always keep a visible focus style — keyboard users rely on it to see where they are. And make links distinguishable from surrounding text by more than colour alone (an underline is the safest choice).