target=”blank”

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!…


The post target=”blank” appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

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 share target="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.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-28T12:03:25+00:00) » target=”blank”. Retrieved from https://www.scien.cx/2021/06/09/targetblank/.
MLA
" » target=”blank”." Chris Coyier | Sciencx - Wednesday June 9, 2021, https://www.scien.cx/2021/06/09/targetblank/
HARVARD
Chris Coyier | Sciencx Wednesday June 9, 2021 » target=”blank”., viewed 2024-03-28T12:03:25+00:00,<https://www.scien.cx/2021/06/09/targetblank/>
VANCOUVER
Chris Coyier | Sciencx - » target=”blank”. [Internet]. [Accessed 2024-03-28T12:03:25+00:00]. Available from: https://www.scien.cx/2021/06/09/targetblank/
CHICAGO
" » target=”blank”." Chris Coyier | Sciencx - Accessed 2024-03-28T12:03:25+00:00. https://www.scien.cx/2021/06/09/targetblank/
IEEE
" » target=”blank”." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/06/09/targetblank/. [Accessed: 2024-03-28T12:03:25+00:00]
rf:citation
» target=”blank” | Chris Coyier | Sciencx | https://www.scien.cx/2021/06/09/targetblank/ | 2024-03-28T12:03:25+00:00
https://github.com/addpipe/simple-recorderjs-demo