So I stumbled on something interesting as a result of a typo in my code. The target="_blank" attribute in the <a> tag. I accidentally spelled blank without the underscore and didn’t notice any changes at first. The link still opened in a different tab, just as expected.
It was when I clicked again to test my button for the active class I had just added that I noticed something odd. It didn’t open a new tab; in fact, nothing happened. I clicked again—still nothing. I thought I must have accidentally tampered with the href URL while changing the classes, so I checked to see if the URL was correct and it was correct
I was at this for minutes before turning to Google. None of the solutions I found were quite helping, until I stumbled on an article that made me go, “Hold up, wait a minute.” I checked my code and saw the typo. I added the underscore, and voila—it worked just fine. This got me curious, so I dug deeper into the differences between blank and _blank, and these are my findings that I thought to share with you.
When you use target="blank" (without the underscore), the browser treats blank as a custom name for a new browsing context (like a new tab or window). This means every link with target="blank" will open in the same new tab/window named “blank”. You don’t have to use blank as the custom name. For example, using target=”example” works the same way. All links with target=”example” will open in the same new tab/window named “example”. However, using “_example” will not behave like “_blank” instead, it will act as a custom name, similar to example.
<a href="https://www.example.com" target="blank">Visit Example 1</a><br>
<a href="https://www.wikipedia.org/" target="blank">Visit Example 2</a><br>
Clicking these links will open them in the same tab/window named “blank”. The first time a link with target="blank" is clicked, the browser creates a new tab or window and names it “blank”. Subsequent links with target="blank" will open in the same named tab or window.
Other target Attribute Values
Besides custom names, here are other values for the target attribute and what they do:
-
_self: Opens the link in the same browsing context (i.e., the same tab or window where the link was clicked). This is the default behavior.
<a href="https://www.wikipedia.org/" target="_self">Visit Wikipedia</a>
-
_parent: Opens the link in the parent browsing context. If the current document is nested within an iframe, it opens the link in the parent document.
<a href="https://www.wikipedia.org/" target="_parent">Visit Wikipedia</a>
-
_top: Opens the link in the topmost browsing context, which is useful for breaking out of nested iframes.
<a href="https://www.wikipedia.org/" target="_top">Visit Wikipedia</a>
-
_blank: Always opens the link in a new, unnamed tab/window.
<a href="https://www.wikipedia.org/" target="_blank">Visit Wikipedia</a>
I created an example on codepen for you to try out and see for yourself
Till we meet again, your neighborhood web developer🫡