How To Open Link In New Tab HTML

Generally in most of the websites when we click on a link of a page, then 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.

For example, a web page is having a list of seven wonders of the earth. When a user clicks on any one wonder of the planet, then it should be opened in a new tab. Suppose it will provide detail 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 for creating a link on some text or an image, then 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 link Visit errorsea.com, then it will open the link in the same tab of your web browser.

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 attribute of the target to _blank 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.

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

Conclusion

This all about _blank method of the target attribute. We should use this method when we want to provide detail 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.

Leave a Reply

Your email address will not be published. Required fields are marked *