The target attribute controls where a linked document opens, and additional attributes can enhance link functionality and security. Understanding these attributes helps you create better user experiences.
The Target Attribute
The target attribute specifies where to open the linked document. By default, links open in the same window or tab, but you can change this behavior.
Opening Links in a New Tab
The most common use of the target attribute is target="_blank", which opens the link in a new browser tab or window:
<a href="https://www.example.com" target="_blank">
Visit Example (opens in new tab)
</a>
<a href="https://www.google.com" target="_blank">
Google (new tab)
</a>Important Security Consideration
When using target="_blank", you should ALWAYS include rel="noopener noreferrer" for security reasons:
<!-- ✅ Correct - secure -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
External Site
</a>
<!-- ❌ Vulnerable to security risks -->
<a href="https://www.example.com" target="_blank">
External Site
</a>⚠️ Why is this important?
Without rel="noopener", the new page can access your page using window.opener and potentially redirect your users to a malicious site. The noreferrer value prevents the destination site from knowing where the traffic came from.
All Target Values
_blank
Opens the link in a new tab or window:
<a href="document.pdf" target="_blank" rel="noopener noreferrer">
View PDF (new tab)
</a>_self (Default)
Opens the link in the same frame or tab (this is the default):
<a href="about.html" target="_self">About Us</a>
<!-- This is the same as not using target at all -->
<a href="about.html">About Us</a>_parent
Opens the link in the parent frame. Used mainly with iframes:
<!-- Inside an iframe -->
<a href="page.html" target="_parent">
Open in Parent Frame
</a>_top
Opens the link in the full body of the window, breaking out of any frames:
<a href="home.html" target="_top">
Break Out of Frames
</a>The Rel Attribute
The rel (relationship) attribute describes the relationship between the current document and the linked document.
noopener
Prevents the new page from accessing the opening page:
<a href="https://external-site.com" target="_blank" rel="noopener">
External Link
</a>noreferrer
Prevents the browser from sending the referrer header (hides where the traffic came from):
<a href="https://external-site.com" target="_blank" rel="noreferrer">
Anonymous Link
</a>nofollow
Tells search engines not to follow the link (useful for untrusted or paid links):
<a href="https://untrusted-site.com" rel="nofollow">
Untrusted Link
</a>
<!-- User-generated content or sponsored links -->
<a href="https://sponsor.com" rel="nofollow">
Sponsored Link
</a>Combining Multiple Rel Values
You can combine multiple rel values by separating them with spaces:
<a href="https://external.com" target="_blank" rel="noopener noreferrer nofollow">
External Untrusted Link
</a>The Download Attribute
The download attribute prompts the browser to download the linked file instead of navigating to it:
<!-- Download with original filename -->
<a href="document.pdf" download>
Download PDF
</a>
<!-- Download with custom filename -->
<a href="report-2024.pdf" download="Annual_Report.pdf">
Download Annual Report
</a>
<!-- Download an image -->
<a href="photo.jpg" download="vacation-photo.jpg">
Download Photo
</a>Note: The download attribute only works for same-origin URLs. It won't force downloads from external domains due to security restrictions.
Practical Examples
External Links with Best Practices
<!-- Social media links -->
<a href="https://twitter.com/yourhandle"
target="_blank"
rel="noopener noreferrer">
Follow us on Twitter
</a>
<!-- Documentation link -->
<a href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Affiliate or sponsored link -->
<a href="https://partner.com/product"
target="_blank"
rel="noopener noreferrer nofollow">
View Product (Sponsored)
</a>Navigation Menu with Mixed Links
<nav>
<!-- Internal links (no target needed) -->
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/services">Services</a>
<!-- External link in new tab -->
<a href="https://blog.example.com"
target="_blank"
rel="noopener noreferrer">
Blog
</a>
<!-- Download link -->
<a href="/brochure.pdf" download>
Download Brochure
</a>
</nav>Resource Downloads
<section>
<h2>Download Resources</h2>
<ul>
<li>
<a href="guide.pdf" download="Beginners_Guide.pdf">
Beginner's Guide (PDF)
</a>
</li>
<li>
<a href="template.docx" download>
Document Template (DOCX)
</a>
</li>
<li>
<a href="data.csv" download>
Sample Data (CSV)
</a>
</li>
</ul>
</section>When to Use target="_blank"
✅ Good uses for target="_blank":
- Links to external websites or different domains
- Links that open PDFs or other documents
- Reference materials users may want to keep open
- Links to social media profiles
- External documentation or help resources
❌ Avoid target="_blank" for:
- Internal navigation within your site
- Standard website navigation menus
- Every single link (it annoys users!)
- Links in a sequential flow or process
Accessibility Considerations
When using target="_blank", consider adding a visual indicator and warning text:
<a href="https://external.com"
target="_blank"
rel="noopener noreferrer">
External Site
<span aria-label="(opens in new tab)">(opens in new tab)</span>
</a>
<!-- Or with an icon -->
<a href="https://docs.example.com"
target="_blank"
rel="noopener noreferrer">
Documentation 🔗
</a>This helps users understand that clicking will open a new tab.
Best Practices
- Always use
rel="noopener noreferrer"withtarget="_blank" - Don't overuse
target="_blank"- respect user choice - Indicate when links open in new tabs (for accessibility)
- Use
rel="nofollow"for untrusted or paid content - Use the
downloadattribute for file downloads - Keep internal site navigation in the same tab/window
- Test all links to ensure they work as expected
Modern Browser Support
Good news! Modern browsers (Chrome 88+, Firefox 79+, Safari 12.2+) now automatically apply rel="noopener" behavior to target="_blank" links. However, it's still best practice to explicitly include it for older browsers and clarity.
Key Takeaways
target="_blank"opens links in a new tab- Always use
rel="noopener noreferrer"withtarget="_blank"for security rel="nofollow"tells search engines not to follow a link- The
downloadattribute prompts file downloads - Don't overuse new tabs - it can frustrate users
- Indicate to users when links open in new tabs
- Use target attributes thoughtfully for better UX
What's Next?
Now that you understand link targets and attributes, you're ready to learn about special link types. In the next lesson, we'll explore how to create email and phone links that let users contact you directly from your webpage.