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.