HTML Open Link in New Tab

This article will discuss the HTML open link in a new tab. Let's first understand how to create a link in HTML.

Creating a Link

The "href" attribute is utilized to construct a link in HTML. The "href" attribute is written inside the <a> tag to make it a clickable link.

Syntax:

The <a> is the opening tag, and </a> is the closing tag in the above syntax. The value given to the "href" attribute is the URL. The name of the link is written between the opening and closing tags.

Demonstration to create a link:

We will utilize the "href" attribute to create a link in this demonstration.

Code:

Output:

Here is the output where we can witness a link that, when clicked, takes us to the website.

When the link is clicked, the website opens in the same tab. But sometimes, we need the previous page, so we have to open the previous web page again manually in a new tab.

There is a way in HTML to directly open the link in a new tab and access both the previous page and the new page.

There are many ways in which we can open the link in a new tab:

• Using the HTML "target" attribute
• Using JavaScript

Let us understand both ways one by one.

Using the HTML "target" Attribute

The "target" attribute automatically opens the link in a new tab. The value of the target must be set to "_blank."

Syntax:

The above syntax of the "target" attribute is utilized to open the link automatically in the new tab when the "_blank" value is assigned to it.

Demonstrations of using the HTML "target" Attribute

Demonstration 1:

In this demonstration, we will create a link that will automatically open in a new tab utilizing the "target" attribute.

Code:

Output:

If we click on the link that can be witnessed in the output below then it will automatically get open in the new tab.

Demonstration 2:

Let us see another demonstration to open a link in the new tab utilizing the "target" attribute.

Code:

Output:

We can witness a link in the output below, which, when clicked, opens the Wikipedia page in the new tab.

Using JavaScript

The window.open( ) function is utilized to open the link in a new tab.

Syntax:

The window.open( ) is the function in the above syntax. The link that we want to open in a new tab is written in place of the URL, and the value "_blank" is written in place of the target.

In the <script> tags, the function is defined, and the window.open( ) method is used within this function. The "onclick" attribute is written inside the button element to execute some action when the button is clicked.

Demonstrations of using the window.open( ) Method

Demonstration 1:

In this demonstration, we will construct a button that, when pressed, automatically opens the URL in a new tab.

Code:

Output:

Here is the output below where we can witness a button. When the button is clicked then the Javatpoint website will automatically open up in the new tab.

Demonstration 2:

We will see another demonstration in which we will utilize the window.open( ) function to automatically open the URL in the new tab.

Code:

Output:

Here is the output below in which we can witness a button. When the button is clicked then the Google search engine will automatically open in the new tab.

Conclusion

We have comprehended the HTML open link in the new tab in this article. We can use the "target" attribute and window.open( ) to open a link in a new tab.