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