How to open link in a new tab in HTML?

Html Problem Overview

I'm working on an HTML project, and I can't find out how to open a link in a new tab without JavaScript.

I already know that <a href="http://www.WEBSITE_NAME.com"></a> opens the link in the same tab. Any ideas how to make it open in a new one?

Html Solutions

Solution 1 - Html

Set the target attribute of the link to _blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

For other examples, see here: http://www.w3schools.com/tags/att_a_target.asp

Note

I previously suggested blank instead of _blank because, if used, it'll open a new tab and then use the same tab if the link is clicked again. However, this is only because, as GolezTrol pointed out, it refers to the name a of a frame/window, which would be set and used when the link is pressed again to open it in the same tab.

Security Consideration!

The rel="noopener noreferrer" is to prevent the newly opened tab from being able to modify the original tab maliciously. For more information about this vulnerability read the following articles:

Solution 2 - Html

Use one of these as per your requirements.

Open the linked document in a new window or tab:

 <a href="xyz.html" target="_blank"> Link </a>

Open the linked document in the same frame as it was clicked (this is default):

 <a href="xyz.html" target="_self"> Link </a>

Open the linked document in the parent frame:

 <a href="xyz.html" target="_parent"> Link </a>

Open the linked document in the full body of the window:

 <a href="xyz.html" target="_top"> Link </a>

Open the linked document in a named frame:

 <a href="xyz.html" target="framename"> Link </a>

See MDN

Solution 3 - Html

If you would like to make the command once for your entire site, instead of having to do it after every link. Try this place within the Head of your web site and bingo.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

hope this helps

Solution 4 - Html

Use target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

Solution 5 - Html

When to use target='_blank' :

The HTML version (Some devices not support it):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

The JavaScript version for all Devices :

The use of rel="external" is perfectly valid

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$('a[rel="external"]').attr('target', '_blank');
</script>

and for Jquery can try with the below one:

$("#content a[href^='http://']").attr("target","_blank");

If browser setting don't allow you to open in new windows :

href = "google.com";
onclick="window.open (this.href, ''); return false";

Solution 6 - Html

target="_blank" attribute will do the job. Just don't forget to add rel="noopener noreferrer" to solve the potential vulnerability. More on that here: https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>

Solution 7 - Html

You can use:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

However the above make your site vulnerable to phishing attacks. You can prevent it from happening in some browsers by adding rel="noopener noreferrer" to your link. With this added, the above example becomes:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

check out for more information: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Solution 8 - Html

You could do it like this:

<a href="http://www.WEBSITE_NAME.com" target="_blank" rel="noopener noreferrer">Open</a>

Originally was:

<a href="http://www.WEBSITE_NAME.com"></a>

Also look at the following url on MDN for more information about security and privacy:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

which in turn has a link to a good article named Target="_blank" - the most underestimated vulnerability ever:

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

Solution 9 - Html

The simple way to open the link in a new tab is to add a target attribute in the link having a value equals to "_blanl", like this :

<a href="http://www.WEBSITE_NAME.com" target="_blank"></a>

Solution 10 - Html

If anyone is looking out for using it to apply on the react then you can follow the code pattern given below. You have to add extra property which is rel.

<a href="mysite.com" target="_blank" rel="noopener noreferrer" >Click me to open in new Window</a>

Solution 11 - Html

In case of React, if anyone wants to open link in a new tab. Please use from react-router-dom, because <a href="/path"></a> refresh full page, even though if your page changes only some text or image on the new route. For Link usage please refer here

Content Type	Original Author	Original Content on Stackoverflow
Question	ZenthyxProgramming	View Question on Stackoverflow
Solution 1 - Html	SharkofMirkwood	View Answer on Stackoverflow
Solution 2 - Html	Learner Always	View Answer on Stackoverflow
Solution 3 - Html	Cyberquill	View Answer on Stackoverflow
Solution 4 - Html	Evan Hahn	View Answer on Stackoverflow
Solution 5 - Html	Kaleem Ullah	View Answer on Stackoverflow
Solution 6 - Html	Vadym P	View Answer on Stackoverflow
Solution 7 - Html	Thabang	View Answer on Stackoverflow
Solution 8 - Html	darmis	View Answer on Stackoverflow
Solution 9 - Html	Gaurav	View Answer on Stackoverflow
Solution 10 - Html	Sunil Kumar	View Answer on Stackoverflow
Solution 11 - Html	Ankita Srivastava	View Answer on Stackoverflow