Hello, I was working on HTML and would like to know how can I open anchor link ( HTML ) in a new tab instead of loading URL on the same page? Suppose this is my anchor tag HTML
<a href="URL">Open in new tabs</a>
You can simply use target="_blank" to open new tab and your link it, here is the sample HTML
<a href="URL" target="_blank">Open in new tabs</a>
<a href="http://www.example.com/" target="_blank" rel="nofollow noopener noreferrer">Click Here to open new window</a>
In the above HTML target attribute specifies where to open the linked document, other values of target attribute is as below
|_blank||Opens the linked document in a new window or tab|
|_self||Opens the linked document in the same frame as it was clicked (this is default)|
|_parent||Opens the linked document in the parent frame|
|_top||Opens the linked document in the full body of the window|
|framename||Opens the linked document in a named frame|
To prevent tabnabbing, add the rel="noopener no referrer" attribute to the links opening in a new tab
If you want to open a button in new window you can use code below
<button class="btn btn-primary" onClick="window.open('http://www.example.com');"> Open </button>
Above answer is correct, but here are multiple version of opening a link in new tab
<a href="example.com" target="_blank">This link will open in new window/tab</a>
By Selecting all anchor tags which has rel="external", set attribute
If you want to open all links in new tab for entire website, you can use the below code in <head> HTML tag
<head> <title>Some Text</title> <base href="https://www.exampleBaseURL.com/" target="_blank" rel="noopener noreferrer"> </head>
Instead of adding "
target='_blank'" for each link, you can use
base tag in HTML head.
Above answers work, but if you want you can use "base" tag in HTML head to open all links in new tab
here is an example
<head> <title>your text</title> <base target="_blank"> </head> <body> <a href="qawithexperts.com">Links open in new tab using base Tag</a> </body>
But base tag doesn't support "
rel='noopener noreferrer'", so you need to use in your anchor tag, if needed.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly