Links: The <a> Element
Links are what make the web a web — <a> (anchor) elements
connect pages, sections, files, and resources together. This
tutorial covers the anatomy of a link, the difference between
absolute and relative URLs, opening links safely in a new tab, and
writing link text people can actually use.
Anatomy of <a href>
The href (hypertext reference) attribute is the only thing that
makes an <a> a real link — without it, <a> renders as plain,
unstyled, unfocusable text.
anchor-basic.html
<a href="https://developer.mozilla.org">MDN Web Docs</a> <!-- Without href, this is not a functional link --> <a>Not clickable</a>
href— the destination URL, path, or fragment.The content between the tags — the visible, clickable link text.
Browsers style links blue and underlined by default, and purple once visited — both fully overridable with CSS.
Absolute vs Relative URLs
URL type | Example | When to use |
|---|---|---|
Absolute |
| Linking to a different domain, or when the full URL is needed (emails, RSS) |
Root-relative |
| Linking within the same site regardless of current page depth |
Relative |
| Linking to a nearby page, relative to the current URL |
url-types.html
<!-- Absolute — full URL including protocol and domain --> <a href="https://example.com/blog/post-1">Read the post</a> <!-- Root-relative — starts from the domain root --> <a href="/blog/post-1">Read the post</a> <!-- Relative — resolved against the current page's URL --> <a href="post-1">Read the post</a> <a href="../archive">Back to archive</a>
/path) don't break when a page moves to a different folder depth, unlike plain relative URLs which are resolved against the current page's location.Opening Links in a New Tab
target="_blank" opens the link in a new tab or window. On its own,
this introduces a security and performance risk: the new page
gets partial access to the window.opener object of the page that
linked to it, which a malicious destination could exploit.
target-blank.html
<!-- Risky: opener has access to window.opener --> <a href="https://example.com" target="_blank">External site</a> <!-- Safe: rel breaks the opener relationship --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> External site </a>
rel="noopener" prevents the new page from accessing window.opener (blocking a class of tab-hijacking attacks). rel="noreferrer" additionally strips the Referer header, so the destination site doesn't learn where the click came from. Modern browsers apply noopener behavior to target="_blank" links automatically, but explicitly adding rel="noopener noreferrer"remains the safe, portable habit.Link Text Best Practices
Link text should describe where the link goes, independent of surrounding context — screen reader users often navigate by pulling up a list of all links on a page, out of context.
link-text.html
<!-- Bad: meaningless out of context --> <p><a href="/pricing">Click here</a> to see our pricing.</p> <!-- Good: descriptive on its own --> <p>See our <a href="/pricing">pricing plans</a>.</p>
Avoid vague phrases like "click here", "read more", or "link" with no context.
Front-load the meaningful words in the link text (helps scanning and screen-reader link lists).
Never use a raw URL as visible link text unless the URL itself is the point (e.g. citing a source).
<a href> for navigation (going somewhere — another page, another section, a file). Use <button> for actions that happen on the current page (submitting a form, opening a modal, toggling a setting). Mixing the two up confuses both sighted users and assistive technology.