Open link in new tab or window

Question

Is it possible to open an a href link in a new tab instead of the same tab?

<a href="http://your_url_here.html">Link</a>

Whenever you use target="_blank" be aware of possible tabnabbing attacks! See also: http://danielstjules.github.io/blankshield/ (To prevent this add `rel="noopener"` to the links) — Carl Ambroselli, Mar 22 '16 at 14:57

score 2345 · Accepted Answer · edited Sep 09 '19 at 16:12

2345

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:

edited Sep 09 '19 at 16:12

Toodoo

8,570
6
35
58

answered Mar 21 '13 at 15:36

Nathan

24,586
4
27
36

_blank opens in a new window, not in a new tab. Edit: Just tried it. Apparently, that's not true. Then I wonder what the difference is with _tab – Toon Casteele Mar 21 '13 at 15:36
6

there is no _tab... there is _new and _blank – Nathan Mar 21 '13 at 15:40
6

No new either according to w3schools: http://www.w3schools.com/tags/att_a_target.asp – Toon Casteele Mar 21 '13 at 15:41
_new works just fine...even if it's not listed there... – Nathan Mar 21 '13 at 15:48
So does _tab... Exactly my point. See @DarkCthulhu's reaction to my answer about groups – Toon Casteele Mar 21 '13 at 15:49
42

_blank is handled on a vendor basis. Most modern browsers will, by default, open in a new tab. Older browsers, such as the IE hoard, will open in a new window - either because they don't have a tabbed feature, or because their default behaviour is a new window. – Larry May 31 '13 at 10:23
6

When not using a special name, as specified in links above, target is the name of the window (or "frame") you're targeting. If you set it to _tab or _new then it opens a window with that name. If a user clicks that link, goes back to your initial page and clicks another link with the same target, the tab/window opened the first time should have the content loaded into it. – umassthrower Jan 05 '15 at 03:00
34

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:39
2

@ToonCasteele While what you are saying is correct, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) is considered a more credible source than W3Schools. (The reason why is a bit long to explain here and can easily be found by Google) – StubbornShowaGuy Sep 29 '16 at 05:30
1

Target=”_blank” - vulnerability, explained with example: https://mathiasbynens.github.io/rel-noopener/ – BRap Apr 09 '18 at 10:53
The target="_blank" vulnerability can only change your window.location (it can't execute arbitrary JS, as the linked Medium article misleadingly says). noopener solves that. For older browser, noreferrer is needed, but that means that linked websites won't be able to know where the traffic is coming from (no SEO impact though). – now May 01 '19 at 19:34
2

In Chrome 49 & Opera 36, Firefox 52, Desktop Safari 10.1+, and iOS Safari 10.3+, "noreferrer" is not needed anymore. – now May 01 '19 at 19:35

score 223 · Answer 2 · edited May 19 '22 at 00:51

223

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.

edited May 19 '22 at 00:51

Zach Jensz

3,650
5
15
30

answered Mar 21 '13 at 15:39

gotson

3,613
1
23
40

11

I have to agree fully with taking away the decision from the user or browser. The user will have a preference which they are accustomed to and this removes their right to their preference. However, that being said... there are times that this is needed. (print dialogs, etc) – avanderw Nov 27 '13 at 07:17
7

Although I feel this is true in many cases, for less technical users, I think (my opinion) that this simply is frequently not true. Some users may need this help or they risk the chance of not knowing how to get back to a page that they wanted left open. My two cents to try to put a little more of a user experience perspective on things. – matthewsheets Jan 30 '14 at 05:44
8

I would agree with the "shouldn't" for websites, but remember that not all HTML is written for websites. I was thinking of something for an in-house web-app where it would be nice make some links open in new tabs without teaching everyone in the office how to ctrl+click. – TecBrat Mar 14 '14 at 17:15
3

While I mostly agree with @gotson on traditional websites... it is becoming the case that for webapps you may not want external links killing your app. A good case is the new chrome web app promotion feature... where users are provided a chromeless app launcher. In that case, going to external links and navigating the external website will require many back button presses to go back to the app. – Ray Foss Mar 16 '15 at 14:01
15

How is this so highly rated when it doesn't even answer the question? – Yay295 Sep 09 '15 at 01:23
I appreciate that this got high marks for offering the best practice of not spawning a new tab/window. However, I just had a context where the better behavior was to do just that. Specifically, I'm putting together a site in GH Pages, and there are pages where I want to invite the reader to make quick fixes. If the link is clicked, then they are sent to the repo to make the edit. Once the edit is complete, then they have to browser-back a few clicks. Or, with "_blank", they just close the tab. It also helps them orient whilst editing. – Merovex Oct 26 '15 at 13:42
7

I would patently disagree that this is a "best practice", and argue that it depends entirely on the use case. For instance, I work on a web application where the user is performing most of their daily work, and having a link navigate in the same tab would be terrible. Likewise, if I have a tutorial/instructional page, I would link out to related materials, and wouldn't want to navigate in-place. However, if the page is just intended to be consumed by the user, navigating in-place would likely be more ideal. – Spazmoose Jun 28 '17 at 20:02
correct me if i'm wrong. I don't see an option to set open links in new tab in safari browser in mac. So the use for "_blank" is still needed/useful for cases like this. – prabhu Feb 19 '18 at 13:27
1

I'm having hard time accepting this as best practice. Somehow, with desktop apps, no one doubts that opening new window/tab vs. changing the content in existing app is solely decision of UI designer. – Red Jul 01 '18 at 10:31
I think there might also be SEO implications, if you instruct the browser not to send a referrer, no? – Phil Jul 02 '19 at 15:40

score 55 · Answer 3 · edited Mar 07 '23 at 21:00

55

set the target attribute of your <a> element to "_tab"

EDIT: It works, however W3Schools says there is no such target attribute: http://www.w3schools.com/tags/att_a_target.asp

EDIT2: From what I've figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I'm not sure how these work):

From the link:

_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

edited Mar 07 '23 at 21:00

General Grievance

4,555
31
31
45

answered Mar 21 '13 at 15:36

Toon Casteele

2,479
15
25

1

you mean _blank or _new...from what i know there is no _tab – Nathan Mar 21 '13 at 15:38
Lol I just tried it out and it worked. I wonder why... – Toon Casteele Mar 21 '13 at 15:39
11

W3Schools is NOT the W3C. See http://www.w3fools.com/ – Jace Cotton Mar 21 '13 at 15:41
So you're going to tell me the attributes I referred to are incorrect @Jacedc? – Toon Casteele Mar 21 '13 at 15:45
2

@Jacedc You can use anything there instead of `_tab`. It creates a window-group. – Anirudh Ramanathan Mar 21 '13 at 15:46
6

Not everything at W3Schools is incorrect. But before you said the W3C (The World Wide Web Consortium), and then linked to W3Schools, which has no relation to the W3C or creating the web standards whatsoever. But I see you edited it. :) – Jace Cotton Mar 21 '13 at 15:47
3

Yeah, because you pointed it out and I stand corrected, thanks for that :) – Toon Casteele Mar 21 '13 at 15:48
How to open 2 links which have _blank in 2 new tabs rather than in the same new tab? – ACV Sep 14 '15 at 22:19
#@ACV if they've got _blank as the target, they should be in separate tabs. If youve anything other than the ones listed above (eg: _tab), the new window/tab will have that name and both will open in that window/tab. – drevicko Aug 25 '17 at 11:01

score 40 · Answer 4 · edited Feb 26 '18 at 15:03

40

You can simply do that by setting target="_blank", w3schools has an example.

edited Feb 26 '18 at 15:03

Brad Koch

19,267
19
110
137

answered Mar 21 '13 at 15:52

Ehsan

4,334
7
39
59

simple and to the point, thanks – Emre Aug 01 '18 at 09:07
Beware that even though adding rel="noopener noreferrer" is optional, it has security problems. Just copy the accepted answer, or read the links mentioned in there to find out why it's needed. – Nick Jul 22 '19 at 20:29

Open link in new tab or window

4 Answers4

Linked

Related