Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between “blank” and “_blank” target attributes in HTML
Sometimes, we may have noticed links on webpages that leads us to a different webpage. In some websites, if we click on that certain links, they will open in a new browser tab or on a new window and some websites reuse one new browser tab for subsequent clicks on the link. Additionally, some websites use the same original page for the links. These behaviors are achieved by utilizing the HTML target attribute.
In this article, we will explore how to use the target="blank" and target="_blank" attributes to open hyperlinks in new tabs.
The Target Attribute
The target is an optional attribute of anchor tag. If we use target=“blank” as value to this attribute, the link will be opened in a new browser tab when clicked. The same tab will be reused for all the links with the same attribute (target=“blank”).
By using this attribute, the user can have hassle free experience because whenever the user clicks on the links in the webpage, it will open in a separate tab instead in the same tab. It also avoids to use too many tabs in the browser which might affect the performance of the browser and get hanged up.
Example
In the following example, we are using the target attribute with the “blank” value for a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Using target = "blank"</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<h3>Here we are using the target attribute with "blank" value</h3>
<a href="https://www.tutorialspoint.com/index.htm" target="blank">Click here for tutorialspoint</a>
</div>
</body>
</html>
As we can see in the above code, we used the target="blank" attribute in a hyperlink opens the link in a new browser tab. Subsequent links with the same attribute will also open in that same tab.
Target = "_blank"
If we pass the value to the target attribute as, target="_blank" in an anchor tag, the link will be opened in a new browser tab. It opens a new browser tab every time we click on the link. This attribute will not reuse a single new tab.
By using this attribute, the user can have a seamless way to explore different webpages while keeping the original page readily accessible. Also, this may affect the overall performance of the browser as well as affect the system.
Example
In the following example, we are using the target attribute with the “_blank” value for a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Using target = "_blank"</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<h3>Here we are using the target attribute with "_blank" value</h3>
<a href="https://www.tutorialspoint.com/index.htm" target="_blank">Click here for tutorialspoint</a>
</div>
</body>
</html>
Here, we used the target="_blank" attribute in a hyperlink that opens the link in a new browser tab every time we click on that link.
Example
In the example below, we are not using any target attribute for the hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Without target attribute</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<h3>Here we are not using the target attribute with any value</h3>
<a href="https://www.tutorialspoint.com/index.htm">Click here for tutorialspoint</a>
</div>
</body>
</html>
As we can see in the output below, whenever we click on the link, it will be opened in the same webpage.
Difference Between Target = "Blank" and Target = "_blank"
target="blank" attribute will open the links in a new browser tab and uses the same tab for any future links that has same attribute (target="blank").
target="_blank" attribute will open the links in a new tab every time.
122 Views
