How to open link in a new tab in HTML?

Question

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?

As Rohit says, add the param target="_blank", however, on FireFox at least if you do two underscores target="__blank" it will open in a new tab, but clicking other links using the same double underscore, opens the new pages in the previous new tab, meaning you only have one additional tab open. — Justin Levene, Jan 30 '19 at 10:45
You no longer need to use rel="noopener" while using target="_blank", it is added by default [source](https://mathiasbynens.github.io/rel-noopener/#:~:text=%3A%20browsers%20now%20implicitly%20set%20rel%3Dnoopener%20for%20any%20target%3D_blank%20link) — Vaibhav, Feb 10 '22 at 11:07

score 955 · Accepted Answer · edited Mar 11 '21 at 01:11

955

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:

edited Mar 11 '21 at 01:11

informatik01

16,038
10
74
104

answered Jul 17 '13 at 22:11

SharkofMirkwood

11,483
2
17
25

26

The special targets all start with an underscore. `blank` would be the name of a frame or window. It may seem to work, because a new window or tab will probably be opened when none exists with the name 'blank', but a second click on the link should open the page in that same tab again instead of opening yet another one. – GolezTrol Jul 17 '13 at 22:12
3

Well, I guess it isn't invalid, it's just different. Instead of `blank` you could just as well use `foo`, I think, while `_blank` actually has a special meaning. I can't find any information to prove otherwise. Can you? – GolezTrol Jul 17 '13 at 22:18
So, if you want two or more links on a page to each open in its own new separate tab, then you should not use `_blank` for those links, because then they will all open in the same new tab. – Stefan Sep 21 '15 at 09:03
2

@Stefan No, `_blank` will be fine; the links will each open in a different tab. If you specify a name without the underscore, (e.g. `blank`) the links will open in the same tab. – SharkofMirkwood Sep 21 '15 at 09:13
@SharkofMirkwood I apologize - you are actually correct. I got confused. – Stefan Sep 21 '15 at 09:42
9

A tip: be aware of vulnerability due _blank. More info https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c – Aistis May 05 '16 at 10:40
2

Another page with the vulnerability https://mathiasbynens.github.io/rel-noopener which it is an example by itself. – PhoneixS Oct 16 '18 at 14:50
I only need to open a new tab without focusing on it. How can we do that? – Aljohn Yamaro Mar 22 '20 at 04:28
the security issue is going away, see https://caniuse.com/mdn-html_elements_a_implicit_noopener – Pascal Pixel Rigaux May 06 '21 at 18:10
Just putting `"#"` in `href=` is not a good idea. This means the link can't be see at the bottom of the window before opening and also means it can't be copied from right-click menu so there's no way of seeing where the link is pointing to in advance (unless you view source code). – Aenfa Feb 06 '22 at 15:23

score 130 · Answer 2 · edited Aug 15 '16 at 08:51

130

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

edited Aug 15 '16 at 08:51

mikemaccana

110,530
99
389
494

answered Jul 12 '14 at 18:55

Learner Always

1,776
2
15
29

Thanks for the information. How to open the link in new tab when clicked? – Shajeel Afzal Sep 18 '17 at 09:25
Use the code in html, as shared above. Most of the new browsers open the links in a new tab by default when you use target="_blank" – Learner Always Sep 18 '17 at 10:59
3

Have in mind that `target="_blank"` has a vulnerability, you can read about it in https://mathiasbynens.github.io/rel-noopener – PhoneixS Oct 16 '18 at 14:51
I'm not sure why they call it a frame instead of a tab or window. For me, a name of NL creates a new tab every time. Some of the comments (and other sources) say that using the same name will use the same tab. That is what I wanted, but instead, each click creates another new tab instead of changing the contents of the first one. – WGroleau Mar 07 '22 at 09:16

score 49 · Answer 3 · edited Jan 20 '19 at 12:43

49

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

edited Jan 20 '19 at 12:43

Daksh Shah

2,997
6
37
71

answered Nov 05 '15 at 13:29

Cyberquill

499
4
3

4

don't forget to add rel="noopener noreferrer" – Blundering Philosopher Jan 19 '19 at 13:48
The base tag does not support the rel attribute. – Alex O Apr 12 '21 at 22:39

Evan Hahn · Answer 4 · 2019-01-19T17:06:08.880

18

Use target="_blank":

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

edited Jan 19 '19 at 17:06

answered Jul 17 '13 at 22:11

Evan Hahn

12,147
9
41
59

4

don't forget to add rel="noopener noreferrer" – Blundering Philosopher Jan 19 '19 at 13:49

Kaleem Ullah · Answer 5 · 2015-11-17T10:39:24.623

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";

don't forget to add rel="noopener noreferrer" – Blundering Philosopher Jan 19 '19 at 13:48 — Blundering Philosopher, Jan 19 '19 at 13:48

score 7 · Answer 6 · answered Jun 22 '18 at 07:58

7

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>

answered Jun 22 '18 at 07:58

Vadym P

71
1
3

1

Another explanation of the vulnerability here: https://mathiasbynens.github.io/rel-noopener/ – Blundering Philosopher Jan 19 '19 at 13:47

score 4 · Answer 7 · answered Mar 02 '19 at 10:59

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

darmis · Answer 8 · 2020-06-21T20:08:32.573

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/

Muhammad Azam · Answer 9 · 2022-10-30T19:45:33.927

2

you ca use target attribute for opening link in new tab

 <a href="https://google.com" target="blank"> Google Link </a>

OR

<a href="https://google.com" target="blank"> Google Link </a>

DIFFERENCE

_blank will always open new tab for link

blank will first time open new tab for link but 2nd time it will update existing tab

edited Oct 30 '22 at 19:45

answered Oct 30 '22 at 19:31

Muhammad Azam

117
4

score 0 · Answer 10 · answered Jul 11 '20 at 06:41

0

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>

answered Jul 11 '20 at 06:41

Gaurav

19
3

score 0 · Answer 11 · answered Sep 18 '20 at 20:35

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>

score 0 · Answer 12 · answered May 26 '21 at 11:12

0

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

answered May 26 '21 at 11:12

Ankita Srivastava

147
2
11

1

Given that the question is not about react, it'd be helpful to at least post a code example that react users could copy paste. – shaedrich May 26 '21 at 12:33
@shaedrich I have share the link in the answer, that include nice example and usages – Ankita Srivastava May 27 '21 at 13:51
1

The problem with links on SO is that they might not work anymore in the future and your answer would be not helpful anymore. That's why SO prefers self-contained answers where links are only additional resources not those, the answer heavily relies on. – shaedrich May 27 '21 at 13:54
1

Thanks for letting me know about this, I will add the example soon. – Ankita Srivastava May 28 '21 at 06:18

How to open link in a new tab in HTML?

12 Answers12

Note

Security Consideration!

Linked

Related