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'
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
Videos
How do I make my HTML link open in a new tab?
What is target="_blank" in HTML?
Should I use rel="noopener noreferrer"?
I'm trying to add some HTML to a website that will automatically open a different page in a new tab. I know how to create a link that the user can click on, but I'm hoping to have it occur automatically upon loading the site. Does anyone have any suggestions?
You should add the target="_blank" and rel="noopener noreferrer" in the anchor tag.
For example:
<a target="_blank" rel="noopener noreferrer" href="http://your_url_here.html">Link</a>
Adding rel="noopener noreferrer" is not mandatory, but it's a recommended security measure. More information can be found in the links below.
Source:
- MDN | HTML element
<a>| attributetarget - About rel=noopener
- Opens External Anchors Using rel="noopener"
It shouldn't be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user's browser. Some people like tabs; some like new windows.
Using _blank will tell the browser to use a new tab/window, depending on the user's browser configuration and how they click on the link (e.g. middle click, Ctrl+click, or normal click).
Additionally, some browsers don't have a tabs feature and therefore cannot open a link in a new tab, only in a new window.
Hi all, I'm hoping this is the right place for this, but is there a way to something to a URL so that when that URL is linked or embedded somewhere, the link will automatically take them to a new tab?
I am trying to set a link in our top navigation menu on our WordPress site that uses Avada, and I don't have the option to just tell it to open that link in a new tab as a setting. So I was hoping I could set it to do so just by the link itself, but I'm not familiar enough with that to know if it is possible or not. Looking it up myself has only yielded results for "target=_blank" when doing hardcoding on the back end-something that isn't an option with the set up we have (or I'm just not aware of how to go about it).
Any help or advice is appreciated!
I have a button which has a link to a different website and when I click it, it redirects to the site but I want it to go to a different tab so that you can go back to it. I'm pretty sure it's possible since I see other websites do it all the time.