Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The target attribute specifies where a linked document will open.
By default, links open in the same window/tab. With the target attribute, you can make links open in a new tab, new window, or even specific frames.
Control user experience with link behavior
Users stay on your page while exploring links
Essential for external links
target="_self"
Opens the link in the same window/tab (default behavior - no need to specify)
<a href="page.html" target="_self">Same Tab</a>target="_blank"
Opens the link in a new browser tab or window
<a href="https://example.com" target="_blank">Open in New Tab</a>target="_parent"
Opens in the parent frame (if no parent, acts like _self)
<a href="page.html" target="_parent">Parent Frame</a>target="_top"
Opens in the full body of the window (breaks out of frames)
<a href="page.html" target="_top">Top Frame</a>target="framename"
Opens in a named frame (rarely used in modern web development)
<a href="page.html" target="myframe">Custom Frame</a>Links to other pages on your site open in the same tab
<nav>
<a href="/">Home</a>
<a href="/about">About Us</a>
<a href="/services">Services</a>
</nav>Loading preview...
External links open in a new tab, keeping user on your site
<section class="resources">
<h2>Learn More</h2>
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
📖 MDN Web Docs
</a>
<a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">
🎓 W3Schools
</a>
</section>Loading preview...
Mixing internal and external links with appropriate targets
<div class="footer-links">
<div class="section">
<h3>Company</h3>
<a href="/about">About Us</a>
<a href="/careers">Careers</a>
<a href="/contact">Contact</a>
</div>
<div class="section">
<h3>Resources</h3>
<a href="https://blog.example.com" target="_blank">Blog</a>
<a href="https://twitter.com" target="_blank">Follow Us</a>
<a href="https://github.com" target="_blank">GitHub</a>
</div>
</div>Loading preview...
When using target="_blank", always add rel="noopener noreferrer" to prevent security vulnerabilities.
<a href="url" target="_blank" rel="noopener noreferrer"><a href="url" target="_blank">