How to open link in a new tab in 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:
- The target="_blank" vulnerability by example
- External Links using target='_blank'
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
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
Use target="_blank":
<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
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";