An external link points to a different website entirely. They're how you cite sources, reference documentation, or send visitors somewhere useful outside your own site.
Syntax
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>Basic Example
<p>Full spec details are available on the <a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener">WHATWG HTML Living Standard</a>.</p>Browser output: a normal link that opens the WHATWG site in a new browser tab, leaving your own page still open in its original tab.
How It Works
External links use an absolute URL, since there's no "current page" context to resolve a relative path against on someone else's domain — see Absolute URL. They're commonly combined with target="_blank" so the visitor doesn't lose their place on your site.
Important Attributes
| Attribute | Purpose |
|---|---|
target="_blank" | Opens the external site in a new tab |
rel="noopener" | A required security pairing with target="_blank" — see below |
rel="nofollow" | Tells search engines not to pass ranking credit to the destination — see nofollow-links |
Real-World Example
<p>Read the official <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener noreferrer">W3C Web Accessibility Initiative guidelines</a> for more detail.</p>Citing an authoritative outside source in a technical article — a genuine, honest use of an external link that adds real value for the reader.
The Security Reason rel="noopener" Matters
When a link opens with target="_blank", older browsers gave the newly opened page partial JavaScript access back to the original tab via window.opener — a real security risk known as reverse tabnabbing, where a malicious destination page could silently redirect your original tab to a phishing page. Adding rel="noopener" (and, for older browser support, noreferrer too) blocks that access.
Common Mistakes
- Using
target="_blank"withoutrel="noopener"— a real, well-documented security gap, not just a style preference - Opening every external link in a new tab automatically, without considering whether that's actually the best experience for the user
- Linking to low-quality or untrustworthy external sites without a
nofollowrelationship, effectively vouching for them
Best Practices
- Always pair
target="_blank"withrel="noopener" - Link out to genuinely relevant, trustworthy sources — it's a real credibility signal, not something to avoid entirely
- Consider adding visible or screen-reader-only text indicating a link opens in a new tab, so users aren't caught off guard
Accessibility Considerations
A link that opens in a new tab without warning can disorient users relying on the browser's back button, especially screen reader and keyboard-only users. Consider adding visually hidden text like "(opens in a new tab)" inside the link.
SEO Considerations
Linking out to authoritative, relevant sources can be a genuine quality signal for the linking page. Where the destination is untrusted, user-generated, or a paid placement, an appropriate rel value (nofollow, sponsored, or ugc) is the correct, honest choice — see rel-attribute.
Browser & Modern HTML Notes
Modern browsers (since roughly 2021) implicitly apply noopener behavior to target="_blank" links by default in many cases — but explicitly writing rel="noopener" yourself is still the safe, portable, spec-correct habit across all browsers and browser versions.
Mini Practice
- Add a properly secured external link (
target="_blank" rel="noopener noreferrer") citing an outside source. - Explain, in your own words, what reverse tabnabbing is and how
rel="noopener"prevents it.
