Topic 28 of 41
Link Targets
Overview
When a user clicks an `<a>` (anchor) tag, the browser needs to know *where* to open the new page. Should it replace the current page? Open in a brand new tab? Open in a popup window?
The `target` attribute controls this exact behavior.
Syntax
By default, every link has a target of `_self`. This means the new page will load in the exact same tab, replacing whatever the user is currently reading. You rarely need to actually type `target="_self"`.
_self (Default)
html
<!-- Both of these do the exact same thing -->
<a href="/about">About Us</a>
<a href="/about" target="_self">About Us</a>Use `target="_blank"` when you are linking to an EXTERNAL website (like linking to your YouTube channel from your portfolio). You want it to open in a new tab so the user doesn't lose their place on your actual website.
_blank (New Tab)
html
<!-- Opens in a brand new browser tab -->
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
Watch on YouTube
</a>Common Pitfalls
- Do not use target='_blank' for internal links (links to your own website). If a user clicks 5 links on your site, they shouldn't end up with 5 tabs open. It's terrible UX.
- Always remember the security attributes rel='noopener noreferrer' when using _blank to prevent malicious websites from hijacking the user's original tab via window.opener.
Real-World Example
A footer with social links opening in new tabs and local links opening in the same tab:
example
html
<footer>
<div class="local-links">
<!-- Navigating within the site (replaces current page) -->
<a href="/privacy-policy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</div>
<div class="social-links">
<!-- Leaving the site (opens in new tab so they don't leave your app) -->
<a href="https://twitter.com/mycompany" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</div>
</footer>