The target attribute in HTML controls where a linked document opens when a user clicks a link or submits a form.
You’ll most often see it used with the <a> tag.
Simple example:
When opening in a new tab makes sense
Using target=”_blank” Improves user experience.
External resources open in a new tab, which prevents users from losing their place.
Although oversusing it can hurt usability, in the right cases, opening links in a new tab improves flow.
Some such cases are:
- External websites
If the user is leaving your site entirely:
This way, you keep your page open, letting users return easily.
- Reference material or documentation
These kinds of links users may want to check briefly and come back to:
- API docs
- tutorials
- source links in articles
- Downloads or file resources
PDFs, images, or files:
It prevents navigation away from your page and helps you avoid losing form state or scroll position.
- External tools or actions
When users open something interactive like payment gateways or login providers.
Example:
- Long workflows or forms
If the user is in the middle of something:
- filling a form
- writing a comment
- editing content
Opening links in a new tab prevents losing progress.
When you should NOT use it
- Internal navigation
That would be absurd.
Users expect normal navigation, and multiple tabs for the same site become annoying.
- Guiding users through a flow
Avoid breaking flow during checkout processes or onboarding steps.
Note: User onboarding steps are the structured actions that help a new user understand, set up, and start using a product successfully.
Security-related values regarding opening a new tab
Using the noopener and noreferrer rel values is a standard practice when creating links that open in a new tab or window.
The value noopener addresses a specific security vulnerability. Without it, a page opened in a new tab via target="_blank" can access the originating page’s window object through window.opener. This means a malicious external site could potentially redirect your original page to a phishing URL without the user noticing. Setting rel="noopener" ensures the newly opened page has no access to the opener’s browsing context.
The value noreferrer goes a step further in two ways.
First, it prevents the browser from sending the Referer HTTP header to the destination site, meaning the linked site won’t know which page the user came from — a useful privacy protection.
Second, the noreferrer attribute also carries the functionality of noopener in modern browsers, meaning they essentially serve the same purpose. However, it’s advisable to include both for better compatibility across different browsers, especially since some older versions may only recognize one of them.
Together, these two values are the recommended combination whenever you link to external URLs. They protect both your site’s users and their privacy.
Wrapping Up
The target=”_blank” attribute opens a link in a new tab. It improves UX but only if It used carefully and safely. A good rule of thumb is to open a new tab only when the user might want to return immediately without losing context.
Although my blog doesn’t support comments, feel free to reply via email or X.