Home Insights target=“_blank” and the Target Values of the <a> Tag
12th April 2016 in Web Development

target=“_blank” and the Target Values of the <a> Tag

Louise Towler

By Louise Towler

target=“_blank” and the Target Values of the <a> Tag

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.

Target Values

The four most common values for the target attribute are as follows:

_self

The _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.

_blank

As mentioned earlier, target="_blank" opens the link in a new tab or window. Whether it will be a new tab or window is defined by the user’s local settings, with the majority of browsers opting for a new tab. You might be thinking that you’ve seen pop-up adverts open in a new window and therefore this must be possible, but this was probably done using JavaScript rather than HTML.

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

The _parent value opens the link in the parent frame of the frame you’re in. This isn’t a particularly common value as <frameset> and <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

Like _parent, _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.

framename

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.

The Underscore

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.

Example code for this link would be as follows:

<a href="https://indigotree.co.uk" target="blank">indigotree.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 that example link would be as follows:

<a href="https://indigotree.co.uk/contact-us/" target="blank">indigotree.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.

If you require any technical help with your website then get in touch!

Leave a Reply

Your email address will not be published. Required fields are marked *