DEV Community

Cover image for target=”blank”
Bridget Amana
Bridget Amana

Posted on

1

target=”blank”

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. _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>
Enter fullscreen mode Exit fullscreen mode
  1. _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>
Enter fullscreen mode Exit fullscreen mode
  1. _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>
Enter fullscreen mode Exit fullscreen mode
  1. _blank: Always opens the link in a new, unnamed tab/window.
   <a href="https://www.wikipedia.org/" target="_blank">Visit Wikipedia</a>
Enter fullscreen mode Exit fullscreen mode

I created an example on codepen for you to try out and see for yourself

Till we meet again, your neighborhood web developer🫡

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up