In this tutorial, we will explore the process of opening an HTML link in a new tab. To begin, let's delve into the creation of links in HTML.
Creating a Link
The "href" attribute plays a crucial role in creating hyperlinks within HTML documents. This attribute is typically enclosed within the anchor <a> to render the associated content clickable.
Syntax:
<a href="URL">Link name</a>
The <a> represents the start tag, while the </a> symbolizes the end tag within the provided syntax. The URL is assigned as the value for the "href" attribute. The title of the hyperlink is placed between the opening and closing tags.
Demonstration to create a link:
In this example, we will make use of the "href" attribute to establish a hyperlink.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration to create a link</title>
</head>
<body>
<h3>Welcome to our tutorial</h3>
<p>C# Tutorial is the online tutorial platform that allows students to gain knowledge for free and utilize it in their careers.</p>
<a href="https://logic-practice.com/">Click here to reach the Example website</a>
</body>
</html>
Output:
Below is the result displaying a hyperlink that, upon being clicked, redirects us to the webpage.
Clicking on a link typically results in the website loading in the current tab. However, there are instances where it is necessary to revisit the previous page, requiring us to manually open the previous webpage in a new tab.
In HTML, it is possible to open a link in a new tab while retaining access to both the original page and the newly opened page simultaneously.
Here are multiple methods to open a link in a new tab:
- Utilizing the "target" attribute in HTML
- Employing JavaScript for the task
Let us understand both ways one by one.
Using the HTML "target" Attribute
Setting the "target" attribute to "blank" will cause the link to open in a new tab by default. It is important to specify the value of the target attribute as "blank" for this behavior to occur.
Syntax:
target="_blank"
The syntax demonstrated above for the "target" attribute is employed to automatically open the link in a new tab when it is assigned the value "_blank".
Demonstrations of using the HTML "target" Attribute
Demonstration 1:
This tutorial will illustrate how to generate a hyperlink that will open in a new browser tab by using the "target" attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration to open a link in new tab</title>
</head>
<body>
<h3>Welcome to our tutorial</h3>
<p>C# Tutorial provides online tutorials on various topics such as Java, Python, C, C++, C#, HTML CSS, PHP, SQL, JavaScript, Go, Perl, etc.</p>
<a href="https://logic-practice.com/" target="_blank">Click here for more</a>
</body>
</html>
Output:
By clicking on the link displayed in the output, it will open in a new tab automatically.
Demonstration 2:
Let's explore another example demonstrating how to open a hyperlink in a new browser tab by using the "target" attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration-2 to open a link in new tab</title>
</head>
<body>
<h3>What is the meaning of dog breed?</h3>
<p>A dog breed is a variety of dogs that have particular characteristics. There are various breeds of dogs, which include German Shepherd, Golden Retriever, Pomeranian, Dachshund, Beagle, Labrador Retriever, etc.</p>
<a href="https://en.wikipedia.org/wiki/Dog_breed" target="_blank">Know more about it on Wikipedia</a>
</body>
</html>
Output:
In the displayed output, there is a hyperlink that, upon clicking, will launch the Wikipedia page in a new browser tab.
Using JavaScript
The function window.open is employed to launch a link in a new browser tab.
Syntax:
window.open(URL, target)
The function utilized in the syntax mentioned above is window.open. In place of the URL, the link intended to open in a new tab should be specified, and in place of the target, the value "_blank" should be indicated.
Within the <script> tags, a function is declared, incorporating the window.open method. The "onclick" attribute is specified within the button element to trigger a specific action upon clicking the button.
Demonstrations of using the window.open Method
Demonstration 1:
In this example, we will create a button that, upon being clicked, opens the specified URL in a new browser tab automatically.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration-1 to open a link in new tab</title>
<style>
button {
width: 175px;
height: 50px;
background-color: rgb(225, 202, 247);
color: blueviolet;
font-size: large;
}
</style>
</head>
<body>
<h3>Online Tutorial Website</h3>
<button onclick="openTab()">C# Tutorial</button>
<script>
function openTab() {
window.open("https://logic-practice.com/", "_blank");
}
</script>
</body>
</html>
Output:
Displayed below is the output featuring a button that, upon being clicked, will trigger the automatic opening of the Example website in a new browser tab.
Demonstration 2:
In the upcoming example, we will showcase the application of the window.open method to trigger the automatic opening of a URL in a new browser tab.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstration-2 to open a link in new tab</title>
<style>
button {
width: 150px;
height: 36px;
background-color: pink;
color: red;
font-size: large;
}
</style>
</head>
<body>
<h3>Number one search engine</h3>
<button onclick="openTab()">Google</button>
<script>
function openTab() {
window.open("https://www.google.com/", "_blank");
}
</script>
</body>
</html>
Output:
The following output demonstrates the presence of a button. Upon clicking the button, the Google search engine will be launched automatically in a new browser tab.
Conclusion
In this tutorial, we have explored how to open a hyperlink in a new tab using HTML. By utilizing the "target" attribute along with the window.open method, we can achieve this functionality seamlessly.