How to Open a URL in a New Tab Using HTML, JavaScript & JQuery

When users open a link, they might wonder how easily they open it in a new tab. They only have to click on the link, and the elements will open in a new tab.

Have you ever thought of doing so with your links using HTML and JavaScript? This article will guide users through the different methods of creating and opening URLs in a new tab using HTML, JavaScript & JQuery.

Using HTML Tags
Using Javascript
Using JQuery to open Specific URL in New Tab
Using JQuery to open all URLs in New Tab

Method 1: Using the HTML tags to open a URL in a new tab:

While using a web browser, users often try to open or shift from one page to another. When web developers develop a web application, they use the HTML <a> tag (called the anchor tag) to add links and navigate to other pages.

But the point is the browser does not allow users to navigate to a new tab after clicking a link by default. So, developers need to specify the attribute on the link. It will lead the instruction to the web browser that a user is instructing the browser to open the link into a new tab.

When users or developers use the HTML, they can use the "_blank" value in the target attribute, and the browser will open the URL link in a new tab.

In HTML, users can create paths to open a hyperlink to another page with the anchor element <a> tag. Also, as we have discussed in the above sections of this article, users can add the "_blank" value to the target attribute of the <a> tag to open a link in the new tab.

Web developers have other options to use with the anchor tag, i.e., they can use the href property to provide the URL of the page they want any user to prompt.

Let us take a look at the code snippet and understand how it works:

<html>
<head>
<title>Open a URL in a new tab </title>
</head> 
<body> 
<h1> The HTML Anchor tag with the href Attribute </h1> 
<h2> Example of the HTML a href Attribute </h2> 
<a href = "https://www.stechies.com/">Click to open in the same tab</a> 
<br> 
<a href="https://www.stechies.com/" target="_blank"> Google.com </a> Click to open in a different tab</a> 
</body> 
</html>

Run Code Snippet

Explanation:

The above example shows how to use the anchor tag with its two attributes, namely href and target attributes. But users need to remember a crucial point for robust security concerns.

Experts recommend that a professional web developer should add the rel="noreferrer noopener" to the <a> tag whenever they use it with its target attribute. It will prevent potential malicious attacks from the pages with which users will link.

Code Snippet:

<html>
<head>
<title>Open a URL in a new tab </title>
</head> 
<body> 
<h1> The HTML Anchor tag with the href Attribute </h1> 
<h2> Example of the HTML a href Attribute </h2> 
<a href = "https://www.stechies.com/">Click to open in the same tab</a> 
<br> 
<a href="https://www.stechies.com/" target="_blank"> Google.com </a> Click to open in a different tab</a> 
</body> 
</html>

Run Code Snippet

Method 2: Using the JavaScript methods to open a URL in a new tab:

It is another method to open a link in a new tab. Here, */users can use the JavaScript window.open() technique, which is quite simple and easy to use. Users only need to pass two arguments to the JavaScript window.open() method. The first is the URL of the web page, and the second argument is that users used in the HTML section, i.e., the target attribute in the anchor tag <a>. The website needs this to specify where users want to open the link or URL. For example, "_blank."

Syntax:

window.open("URL", "_blank");

Let us see how to use this method:

First, users use the _blank attribute as the second parameter of the JavaScript window.open() method to open the given link in a new tab.
The window.open() returns a value as a reference to the newly created tab or window and returns a null if it fails to open a new tab.
Lastly, users should not use the third parameter to the method as it will open a new window instead of a new tab.

Attributes

_blank - Open URL in new tab.
_parent - Open URL in parent frame (Need to specify frame name)
_self - Open URL in the current page
_top - Open URL in any framesets that may be loaded

Code Snippet:

<html>
<head>
<title>Open a URL in a new tab </title>
<script>
	function NewTab() {
		window.open("https://www.stechies.com", "_blank");
  	}
</script>
</head> 
<body> 
<p> Click the button to open <b> stechies.com </b> in a new tab </p>
<button onclick = "NewTab()" >Open Google </button>
</body> 
</html>

Run Code Snippet

Method 3: Using the JQuery to open a specific URL in a new tab:

Code Snippet:

<html>
<head>
<title>Open a URL in a new tab </title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
	$("#openNewTab").click(function(e){		
		e.preventDefault();
		var url = $(this).attr('href');
		window.open(url, '_blank');
	});
});
</script>
</head> 
<body> 
<p> Click the button to open <b> stechies.com </b> in a new tab </p>
<a href="https://www.stechies.com/" id="openNewTab">STechies.com</a>
</body> 
</html>

Run Code Snippet

Method 4: Using the JQuery to open all URL's in a new tab:

Code Snippet:

<html>
<head>
<title>Open a URL in a new tab </title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).on('click', 'a', function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});
</script>
</head> 
<body> 
<p> Click the button to open <b> stechies.com </b> in a new tab </p>
<a href="https://www.stechies.com/" id="openNewTab">STechies.com</a>
</body> 
</html>

Run Code Snippet

Conclusion:

Finally, we have concluded the article on how to open a URL in a new tab using HTML and JavaScript. Users can use the anchor tag in HTML with the href and the _blank attributes, or they can also use the window.open() method of the JavaScript at the onClick event to create a button for clicking and opening a URL in a new tab.