Master the target attribute to control where links open, ensuring accessibility and user expectations are met when navigating between pages or external resources.
What it is
The target attribute in an HTML anchor tag (<a>) specifies the browsing context (tab, window, or frame) where the linked document will be displayed. The most common values are _self (the current tab) and _blank (a new tab). Related terms include "browsing context," "popup blockers," and "security vulnerabilities" associated with improper use of _blank.
Why it matters
- User Control: Forcing a new tab can disrupt workflow; allowing users to decide via middle-click or keyboard shortcuts is often preferred.
- Accessibility: Screen readers need clear cues if navigation changes context unexpectedly.
- Security: Opening external sites in new tabs without proper attributes can expose your site to reverse tabnabbing attacks.
- Context Preservation: Keeping internal navigation within the same tab maintains session state and history for better UX.
Syntax or steps
Add the target attribute inside the opening <a> tag. If using _blank, always pair it with rel="noopener noreferrer" to prevent security issues.
<a href="url" target="_self">Current Tab</a>
<a href="url" target="_blank" rel="noopener noreferrer">New Tab</a>Example
Here is a realistic snippet showing correct usage for both internal and external links.
<p>
<a href="/about.html" target="_self">Read our About page</a>.
<br>
Visit our partner at
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example Corp</a>.
</p>Explanation: The first link uses _self (or omits the attribute, as it is default) to keep the user on the current page. The second link opens in a new tab but includes rel="noopener noreferrer". This prevents the new page from accessing the window.opener object, which could otherwise redirect the original tab maliciously.
Common mistakes
- Forgetting
rel="noopener": Usingtarget="_blank"alone creates a security risk. Always add the relationship attribute. - Overusing
_blank: Opening every link in a new tab frustrates users who prefer standard browser behavior (Ctrl+Click). - Lack of Notification: Not indicating that a link opens externally can confuse screen reader users. Consider adding text like "(opens in new tab)" or using ARIA labels.
- Using
_topincorrectly: In modern web development without framesets,_topbehaves similarly to_selfbut can cause unexpected breaks in single-page applications.
When to use it
| Scenario | Recommended Target | Reasoning |
|---|---|---|
| Internal Navigation | _self (Default) |
Maintains history and context; users expect this. |
| External Reference | _blank + rel="noopener" |
Keeps user on your site while viewing external content. |
| Download Link | _self |
Browsers handle downloads natively; no new tab needed. |
| PDF/Document | _self or _blank |
Depends on whether you want them to leave the flow. |
Practice
Guided Exercise: Create a link to https://developer.mozilla.org that opens in a new tab securely. Write the full HTML code.
Challenge: Modify the link above so that screen readers announce it opens in a new tab by adding visible text or an aria-label.
Hint: Use aria-label="MDN Web Docs (opens in new tab)" or append text inside the anchor tag.
Quick check
Question: Why is rel="noopener" required when using target="_blank"?
Answer: It prevents the newly opened page from manipulating the original page's window object, protecting against reverse tabnabbing attacks.
Summary
The target attribute controls navigation context, with _self being the safe default for internal links. When using _blank for external sites, always include rel="noopener noreferrer" to ensure security and respect user preferences.