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>
The post target=blank appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.