How To

How To Open Link In New Tab HTML

Generally, when we click on a link to a page in most of the websites, it will open the new page in the current tab. It is the general scenario of websites. But sometimes, it is more effective and user friendly to open the link of a page in a new tab.

Open Link In New Tab

For example, a web page has a list of seven wonders of the earth. When a user clicks on any one wonder of the planet, it should be opened in a new tab. Suppose it will provide detailed information about that place. After reading that page, users can open information about other places.

Note: In the above example, if the website opens a new page on the same tab, then the user finds difficulties while accessing the site.

In HTML, when we use <a> tag to create a link on some text or an image, it usually will open a new page on the same tab.

Example 1

<!DOCTYPE html>
<html>

<body>

<a href="https://www.errorsea.com">Visit errorsea.com</a>

<p>Above link will open in same tab.</p>

</body>
</html>

Explanation

When we click on the link Visit errorsea.com, it will open the link in your web browser’s same tab.

What is the use of target=”_balnk” function in HTML?

The target attribute will decide whether the link will open on the same tab or in a new tab. The target attribute has different values; it will determine the result — for example, _blank, _self, _top, _parent, etc.

The _blank is used for opening the link in a new tab.
Let us consider the following code; it will generate a link that will open in a new tab.

Example 2

<a href=”https://www.errorsea.com” target=”_blank”>Visit errorsea.com!</a>

Explanation

The above code will open the errorsea.com website in anew tab of your browser.

Example 3

<!DOCTYPE html>
<html>
<body>

<a href="https://www.errorsea.com" target="_blank">Visit errorsea.com!</a>

<p>Above link will open in a new tab.</p>
</body>
</html>

Explanation

Here we set the target attribute to _blank, and then it will open the link in a new tab.

We can also use the following values of the target attribute and create different results according to the value.

_blank: It will open the new link in a new tab
_self: It is the default method. It will open the new link on the same tab
_top: It will open the new link in the first frame.
_parent: It will open the new link in the parent frame.

Read Also: JavaScript Operators

Conclusion

This all about _blank method of the target attribute. We should use this method to provide detailed information on some topics because it will make the website more useful and user-friendly. User can come back to the previous page at any time, or he/she can visit different pages of the same website at the same time.

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.