Opening Links in New Tab
Open Links in a New Tab (HTML)
Basic Syntax
<a href="https://www.example.com" target="_blank">Visit Example</a>
Recommended Security Practice
Always add rel="noopener noreferrer" for security and performance:
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure New Tab Link</a>
Why Use rel="noopener noreferrer"?
- noopener prevents the new tab from accessing the window.opener property (security measure against potential phishing attacks)
- noreferrer prevents the browser from sending the referrer information (privacy protection)
- Improves page loading performance in some browsers
- Protects against reverse tabnabbing vulnerabilities
- Recommended by web security experts and modern browsers
Additional Best Practices
- Clearly indicate when links open in new tabs (e.g., with an icon or text)
- Avoid excessive use of new tab links as it can disrupt user experience
- For internal site links, prefer same-tab navigation unless there's a specific reason
- Consider adding visual indicators for external links that open in new tabs
- Test your links on different devices and browsers