How to make a Link open in a New Tab in HTML?

Mainly, there are two reasons to make a link open in a new tab instead of the same.

• You want to link references or other resources which need to be opened in another tab with your content.

• You do not want to lose website traffic to outbound links and want your users to stay on the same page with links opening in new tabs.

In either case, we got you covered.

In this post, we will learn how to do this in HTML. We will learn how to use the target attribute of the anchor tag and how to deal with potential issues in making links open in a new tab.

HTML Anchor tag

In HTML, we use anchor tag <a> to link other pages or resources. Anchor tag works simply like:

<a href="https://www.kundan.dev">Kundan.dev</a>

This works fine but with limitations.

Limitation: The link will open in the same tab, thus, leaving the current page.

This limitation annoys visitors as they have to come back to the same page and continue reading. At the same time, this hurts webmasters as they lose traffic.

So, what is the solution?

An Attribute of Anchor tag: target="_blank"

How to make links open in a new tab?

HTML provides <a>...</a> tag to add links to other pages using the href attribute. This tag has a default behaviour: links open in the same tab.

But, along with href, the Anchor tag has other attributes too!

• title: specify the title of the link.
• target: specify where a link will be opened.
• rel: marks the relationship between the current document and the linked one.

So, we are going to use the target attribute of the anchor tag to make links open in a new tab.

→ target="_blank" is used in the anchor tag to make links leave the default behaviour and open in a new tab.

<a href="https://www.kundan.dev/blog" target="_blank">Kundan.dev Blog</a>

Above, the target attribute of Anchor tag accepts _blank which will make links open in a new tab when clicked.

This solves the limitation of the Anchor tag and opens a whole new possibility.

Additional values of target attribute:

• _self (default): opens in the same browsing context
• _blank: opens links open in a new tab or window
• _parent: opens links in the parent browsing context
• _top: opens a link in the topmost browsing context

Dealing with potential issues

While the usage of target="_blank" unleashes the limitation and unlocks other use cases, this change comes with potential drawbacks.

• Compatibility in older browsers: Some older versions of browsers do not support target="_blank" like some older versions of Internet Explorer and Opera.

  To solve the compatibility issues in older versions of browsers, we need to either provide some alternatives like opening in the current tab or we can add the same behaviour using JavaScript.

• Accessibility concerns for some users: Some users rely on assistive technologies or have specific browsing preferences. They tend to prefer the default style of opening links (in the same tab or window). This creates accessibility issues for those users.

  To fix this issue, we can add small icons or some descriptive text to mark that this link will open in a new tab. Additionally, we can offer the choice to open links in the same or a new tab.

• Security concerns in using <a>: If a browser is compromised and the attacker has access to window object (here, window.open()), then users can be redirected to malicious or phishing web pages.

  To address this security aspect, we need to use rel="noopener" inside of Anchor tag <a>. This prevents malicious redirection inside the browser. This is supported by default in almost all modern browsers.

  <a href="https://www.kundan.dev" target="_blank" rel="noopener">Kundan's Blog</a>
  

When to use target="_blank" in a page?

This is one of the most important questions which need to be addressed. People often tend to abuse this feature and make almost every link open in a new tab.

While this could be beneficial to webmasters, SEO-wise, this isn't a good user experience. Every link opening in new tabs feels a bit irritating and also opens a whole bunch of tabs & windows.

So, this feature must be used in keeping these things in mind. A better approach would be to open important references & resources in a new tab and open links of related contents in the same tab or window.

Final note:

You have learnt about HTML Anchor tag, its uses and implementation. After we learnt about how to make links open in a new tab in HTML.

Following that, we discussed dealing with potential issues in using target="_blank" and at last, we talked about when to use this attribute to change the default behaviour.

So, use the example codes provided above in your project and also ensure proper implementation and potential issues are taken care of.

Happy coding!