How to use the HTML target Attribute

The target attribute

The target attribute specifies where to open the link when users click on it.

If you click the link below, you will be taken to TechStacker’s front page in the same browser tab/window that you are in now:

<a href="https://techstacker.com/">Link to front page</a>

So if you link to another website, the user will be moved away from your website, and over to the website you linked to. You may or may not want this.

This happens because by default <a> elements have a target attribute with a value of _self — which means that it opens the link in the same window the user is in.

So this link element:

<a href="https://techstacker.com/"></a>

Is read by the computer/browser like this:

<a href="https://techstacker.com/" target="_self"></a>

Which can be confusing, because you can’t see that (but now you know).

If you would rather have your links open in a new browser tab, you can override the default _self value with a _blank value:

<a href="https://youtube.com" target="_blank" rel="noopener"
  >If you click this, the YouTube website opens in a new tab</a
>

When to use which?

The simple answer is: if you don’t want to move users away from your website, e.g. for SEO purposes, then use target="_blank".

Otherwise, don’t do anything, and your links will default to open in the same browser window (via the _self value).

Important: when you use target="_blank" you should probably add the noopener attribute along with it for security reasons. At least when you link to external websites. More about noopener attribute.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on