target="_blank". It’s a piece of code very commonly used to make an
<a> tag open the href in a new window. But what is a target? Why is it blank? And, strangest of all, why is there an underscore at the start? If you asked these questions to people who use this code, you’ll probably find that they don’t know the answer, so I’ve had a look into the code to see how it works.
The Target Attribute
First of all, we’ll look at the target attribute of the
<a> tag. By default, links will open in the same window that they’re clicked on. However, this might not be what we want to do; for example, it’s common practice to open links to other websites in a new window. So, how can we do this? By using the target attribute, we’re able to change how the link opens. It offers a few different ways to do it and we’ll look at these below.
The four most common values for the target attribute are as follows:
_self value opens the link in the same window as it was clicked. This is actually the default state for all links, so it’s rare that you will ever need to add this to a link. The only situation in which this will occur is if the
<base> tag has been used in the HTML, as this can set all links to open in a specific way. For example, if
<base href="https://indigotree.co.uk" target="_blank"/> existed within the
<head> tags, you may use
target="_self" to open a specific link in the same window.
As mentioned earlier,
target="_blank" is best used for opening links to an external site in a new tab, but it’s also appropriate for things like PDF links. This will lead the user back to your site after they close the new tab. However, this isn’t a value you want to overuse as it can be quite frustrating to a user when every link is creating a new tab. If users do want to open a link in a new window, they can do this themselves by clicking the scroll wheel on their mouse.
_parent value opens the link in the parent frame of the frame you’re in. This isn’t a particularly common value as
<frame>, the tags used to create frames, are no longer supported as of HTML5. However, this can still be used inside
<iframe> tags to make the link open in the parent of the iframe, rather than in the iframe itself.
_top relates to frames. Using framesets, you could create frames within frames and have several levels of frames. But unlike
_parent, which would move you one level up in the hierarchy,
_top brings you to the top i.e. to the full body of the window.
In the event that you have an iframe within an iframe,
_top will bring you to the full body of the window when the link is clicked.
The final of the frame related target values, framename will open the link into the frame with the name specified by the target value. For example,
<a href="http://ltconsulting.co.uk" target="frame1"> would open into a frame with the name attribute of frame1, i.e.
<frame src="/sidebar" name="frame1">. iframes support the name attribute, so this is something that can be used, but it’s not likely to be something you will see.
When the framename is chosen by the user, it can only begin with a letter i.e. no numbers, symbols, etc.
Now that we know what the values do, the only remaining question is the underscores. Why are they there?
If we removed the underscore and changed the link to
target="blank", you’ll notice that the link does open in a new window regardless of the underscore. To see this for yourself, click the following link:
The code for the above link is as follows:
<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>
But, keep that window open (or re-open it now) and then click this second
target="blank" link to a different page:
The code for the above link is as follows:
<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>
You’ll notice that the second link has opened in the previous new tab that was opened for the first link, rather than into a new, second tab.
This is due to the framename value we looked at earlier. Because we started the value with a letter, “blank” has been interpreted as a framename. In the event that a framename is specified as the target but no such frame exists, a new tab/window will be created using that name. So the new window we opened earlier became the frame with the name “blank”.
In order to avoid this issue, underscores were added before the keywords for the values, and that’s where our
_blank comes from.