Open link in new tab or window

Implications and trade-offs

Here, we highlight a few key matters to consider when implementing the target="_blank" strategy.

Security considerations

Alone, target="_blank" may impose a security risk. The new page can access your window object, potentially violating security norms. Thus, rel="noopener" is the missing piece of the puzzle.

<a href="https://example.com" target="_blank" rel="noopener">example.com</a> <!-- Now, we're safe just like Fort Knox -->


Maintaining user privacy

Further, rel="noreferrer" is a good buddy to maintain the origin secrecy, the new page will be left clueless about the source of traffic. Maintain your web's privacy, because nobody likes nosy neighbors.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a> /* Hide and seek champion! */


Be mindful of user preferences

Some users set their browsers to ignore your target preferences. Also, browsers with no tab support will open links in new windows. Respect their choices!

Other target attributes

Explore other ways to utilize the target attribute:

• target="_self": Default action, opens within the same frame.
• target="_parent": Opens in the parent frame.
• target="_top": Wipes all frames and opens in the whole window.

Sidestep the invalid target="_tab" path; it's unrecognized as a valid value.

Deep dive into linking

User control: Middle-click and Ctrl-click

Users can open links in new tabs using middle-click or Ctrl-click. While this offers user control, it doesn't replace target="_blank".

Window interaction: Named frames

For those loving frames, use target="framename" to open a link in an already named frame.

Accessibility always

Ensure your links speak clearly to screen readers, following the A11Y Project guide. In the world of the web, everyone deserves equality!