Does that make your eye twitch a little bit? Like… it’s a typo. It should be target="_blank" with an underscore to start the value. As in…
<a target="_blank" href="https://codepen.io">
Open CodePen in a New Tab
</a>Welp, that’s correct syntax!
In the case of the no-underscore target="blank", the blank part is just a name. It could be anything. It could be target="foo" or, perhaps to foreshadow the purpose here: target="open-new-links-in-this-space".
The difference:
target="_blank"is a special keyword that will open links in a new tab every time.target="blank"will open the first-clicked link in a new tab, but any future links that sharetarget="blank"will open in that same newly-opened tab.
I never knew this! I credit this tweet explanation.
I created a very basic demo page to show off the functionality (code). Watch as a new tab opens when I click the first link. Then, subsequent clicks from either also open tab open that link in that new second tab.
Why?
I think use cases here are few and far between. Heck, I’m not even that big of a fan of target="_blank". But here’s one I could imagine: documentation.
Say you’ve got a web app where people actively do work. It might make sense to open links to documentation from within that app in a new tab, so they aren’t navigating away from active work. But, maybe you think they don’t need a new tab for every documentation link. You could do like…
<a target="codepen-documentation"
href="https://blog.codepen.io/documentation/">
View CodePen Documentation
</a>
<!-- elsewhere -->
<a target="codepen-documentation"
href="https://blog.codepen.io/documentation/">
About Asset Hosting
</a>
Along with this, consider the
<base>HTML element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/baseThis element dates back to frame days, and it’s not terribly useful now EXCEPT in your last example.
If you’re building a full app where the documentation items should open in a specific window, OR if you want all links on the page to open in a new window, the
<base>element is very useful.Back in the days of frames it was used to tell the browser which frame to update with a clicked link.
A frame with the navigation in it uses the link
<a href="#" target="content">to update the content frame<frame name="content">Nice to know this.
Anyone who worked extensively with frames/framesets in the 1990s or early 2000s knows the difference between target=”_blank” and target=”blank/something”. The mercy of the early birth.
I think you’re playing with fire if you use “blank”, it’s too confusingly close to the special keyword “_blank”. You’re going to end up with people mistaking them.
Remember targets are a holdover from before we had Ajax and people would use Frames to to update portions of the page with content from the server. Targets were meant to have semantic names like “shopping-cart” or locations like “right-sidebar”. Latterly naming a frame or window “blank” doesn’t make much sense.
Also, be aware of the fact, opening a new tab/window using target=”blank” has potential privacy and security implications (_though I do believe newer browsers now set rel=”noopener” by default).
Alex Yumashev, over at Jitbit, has an excellent explanation of the issue(s):
Target=”_blank” – the most underestimated vulnerability ever
I’ve known this for more than a decade, I can’t believe this is the talk these days
If I didn’t blog things because I was worried that some people might already know it, there would be zero blog posts on this site.
I think the thing is every day born mullions of babies and every day thousands people learning something new. That’s why posts with simple and easy info are actual.
If you reload the initial page or open two instances of it, using “_blank” will open two different “new tabs”. Is there a way to keep the new content in only and exactly one opened new tab?
I didn’t knew this, as I am newbie to web development. Thank you for sharing this information. Love to know more .
I have a website that I created from the early days, (around 2009) where I kept all my diary related stuffs. Still working to this day and the site uses framesets. One of the coolest things back then.
One could argue that “the early days” might encompass the entire decade of the 1990s, but I believe that nobody with any knowledge of history would ever classify 2009 as “the early days” for much of anything unless that was the year in which they were born.
Hi! If you open the index.html in two tabs which are practically the same the links with target=”_blank” do not open in the same tab, but actually it would open them in two different tabs for the two initial tabs.
I hope i explained it ok. :)
Is there any way to make links from different pages (if i have many instances of the same page ) open in the exact same tab, every time?
The example above is for
target=blank(without underscore), nottarget=_blank(with underscore). Also,Thanks for the answer! I understood the difference between “blank” and “_blank”. If i have opened two webpages website.com which uses target = “newTabEveryTime”, for all the hrefs on website.com, it opens two new tabs for the two instances of website.com. Does that have anything to do with tabId? I would really like to find a way a href from any page of the website.com (if you work with lets say 15 opened tabs of the website.com content) to open always in only one new tab.
This has mainly be used to create page using different iframes. I did this to create a simple static website with menu and without php back in 90s.
It is well explained https://www.w3schools.com/html/html_iframe.asp
Do not forget security concerns when you use target attribute like explaineed in
https://medium.com/sedeo/how-to-fix-target-blank-a-security-and-performance-issue-in-web-pages-2118eba1ce2f
I thought the target attribute was deprecated but I see they reversed that, I did wonder why a site like this would be writing about a deprecated attribute … hard to keep up, thanks for the enlightenment.
I still think it’s an attribute of the past, javascript was simple to implement.
Maybe a framework required it, does anyone know?
The best 2021-real-world example of this I can think of is straight out of WordPress!
The preview link in the post editor uses
target="wp-preview-1234"where1234is the post ID. That means there’s only ever one tab with the preview of a specific post. If you preview multiple times, it always updates refreshes the existing named tab rather than spawning a second, third, or fourth tab.(Tangent: I’ve seen people accidentally spawn multiple Edit screens of the same post by opening a preview and then clicking the “Edit Page” button in the admin bar. I wonder if it’s possible for a page to name its own tab when opened—not as a new tab—so that the edit links could also prevent people from editing the same page in multiple tabs. I’m guessing no, but maybe there’s some trickery out there that makes it possible.)