How Do You Make a Link Open in a New Tab?

To make a link open in a new tab, you use the target attribute within the HTML anchor (<a>) tag and set its value to _blank.

Understanding the target Attribute

The target attribute of a link element specifies where to open the linked URL. As stated in the reference, if you set target to "_blank", the URL will usually open in a new tab.

However, it's important to note that the final behavior can depend on the user's browser configuration. As mentioned, users can configure their browsers to open links in a new window instead of a new tab, even when target="_blank" is specified. Nevertheless, target="_blank" is the standard way to request that a link opens separately from the current page.

Common target Values

Here are the standard values for the target attribute:

Value	Description
_self	Opens the document in the same window/tab as the source.
_blank	Opens the document in a new window or tab.
_parent	Opens the document in the parent frame.
_top	Opens the document in the full body of the window.
framename	Opens the document in a named iframe.

For opening in a new tab or window, _blank is the value you need.

HTML Example

Here's a simple example showing how to use the target="_blank" attribute:

<a href="https://www.example.com" target="_blank">Visit Example Website</a>

In this code:

• <a href="https://www.example.com"> defines the link and its destination URL.
• target="_blank" tells the browser to open the linked page in a new browsing context, which is typically a new tab or window.
• Visit Example Website is the visible text of the link.

Security Considerations: Using rel="noopener noreferrer"

When using target="_blank", it is highly recommended to add the rel="noopener noreferrer" attribute to your link for security reasons.

• noopener: This prevents the new page from being able to access the window.opener property of the original page. Without noopener, the new tab could potentially control the original tab via JavaScript, which is a security vulnerability (known as tabnabbing).
• noreferrer: This prevents the browser from sending the Referer header to the new page. While less critical for security than noopener, it adds privacy by not revealing the source page to the destination.

Including these attributes enhances the security and privacy of users clicking links on your site.

Updated HTML Example with rel

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website Securely</a>

By incorporating the target="_blank" attribute, you instruct the browser to open the link separately, usually resulting in a new tab for the user, while adding rel="noopener noreferrer" ensures a more secure browsing experience.