How to open a link in a new tab with HTML and JavaScript

Opening links in a new tab is a common functionality used to enhance user experience and ensure that users do not navigate away from the original page. Both HTML and JavaScript provide simple and effective methods for achieving this. In this Answer, we’ll learn about a couple of methods of using HTML and JavaScript to open a link in a new tab.

Method 1: Using HTML’s target="_blank" attribute

HTML is a markup language that determines the content and structure of a web page.

We use the target attribute in the opening <a> tag to open a link in HTML in a new tab. The value of this attribute should be set to _blank. When the link text is clicked, the website link opens in a new tab.

Code explanation

• The <a> element in HTML is used to integrate URLs in websites.

• The href attribute sets the link address that the user will be directed to when they click the link text.

• The URL https://www.educative.io/ is the value of the href attribute.

• The target attribute determines where the link would be opened.

• The value of the target attribute _blank opens the link in a new tab.

• The text Educative is the link text between the opening <a> tag and the closing </a> tag.

Method 2: Opening a new tab with JavaScript

JavaScript is a programming language that makes websites more responsive, interactive, and user-friendly. It can access and modify an HTML web page’s content, define the set of instructions that the web page should follow, and react to events triggered by the browser or user.

JavaScript provides us with the window.open(URL, target) method to open a link in a new tab. We must use _blank as the second parameter of this method if we want the link to open in a new tab.

Note: Avoid adding a third parameter because the link will be redirected to a new window rather than a new tab.

Code explanation

• Line 7: We use the event attribute onclick to call the function openTab(), which executes the script when the button is pressed.

• Line 9: We use the <script> tag to specify a scripting language in the HTML document.

• Lines 10–12: The function openTab() contains the lines of code that will be run to open a link in a new tab with JavaScript. The details are as follows:

  • The window.open() method is used to open the link.

  • We input the link to the website https://www.educative.io/ in the first parameter of the method.

  • We use _blank to tell the window.open() method to open the link in a new tab.

We can use HTML to open links in new tabs when adding simple links in static content, such as articles or navigation menus. We can use JavaScript for the same when working with dynamic links triggered by user interactions, like buttons or specific events.

Conclusion

Opening links in a new tab is a straightforward yet impactful technique to improve user navigation. Whether you use HTML’s target="_blank" attribute for static links or JavaScript’s window.open() method for dynamic interactions, adhering to best practices will ensure a secure and accessible implementation.