The Base Element & Target Attribute
In this section we’re going to talk about controlling how links open. So we’ll look at the target attribute and why these days we only really use it with the "_blank" value, which allows us to open links in a new tab.
We’ll also discuss whether we need to use the target attribute at all. Should we as developers be enforcing how links behave for users, given that all modern browsers provide keyboard shortcuts that will do all the things we want to be links to do - like opening in the current context, opening in a new tab, and opening in a new window. Meaning users can decide for themselves how links will open.
We’ll learn about the the HTML <base> element which we can add to the <head> of our documents. We use <base> to set specific rules for all the links on our page. Like for example, adding rel="noopener" or rel="noreferrer" or both, to give us some extra security when opening links in a new tab.
THE TARGET ATTRIBUTE
The <a> or anchor tag can have additional attribute of target.
<a href="#" target="">Click this link!</a>This target attribute controls how a link opens when it is clicked on by a user. One of the values of the target attribute, and the one that is the main focus of this video is _blank, which tells the browser to open the link in a new tab (or even in a new window on older browsers) when the link is clicked.
TARGET VALUES
It used to be the case that the target attribute could have several possible values, and these include:
- _blank
- _parent
- _self
- _top
The only relevant value of target that still exists today is the _blank value.
OTHER TARGET VALUES WITH DEPRECATED FRAMES
These other values of target - parent, self and top, are really relics of HTML4 and these were used to with HTML frames. Frames are something that we do not use any more, but up until HTML5 was established as the new standard for the HTML language, frames were commonly used. Since HTML5 became the standard, frames have been completely deprecated and are no longer in use.
When they were around, Frames were used to divide the browser window into multiple sections where each section displayed separate HTML file.
So each individual frame here is displaying its own separate HTML file. A collection of frames in the browser window was known as a frameset. Where we now exclusively have a <head> section and a <body> section in our html files, with HTML4, you could have a <head> and a <frameset> instead of the <body>, if you intended your page to be a collection of frames. If you were using a frameset element to display a collection of frames in the browser window, then you couldn’t also use the body element.
In a frameset, the window would be divided into rows and columns in a similar way to how HTML tables are organized. One frame would have one html file loaded inside of it, than another frame would have another file loaded inside of it and so on.
Download this pen from GitHub and have a play around with the different frames which open links in different ways. Note that your HTML file is setup slightly differently as this is in the HTML4 standard.
- The frame labeled as 'Frame 1' has a target _self attribute and that opens the linked document in the same frame as it was clicked (this is default).
- Frame 2 has a target _top attribute, which opens the linked document in the full body of the window.
- Frame 3 has a target _parent attribute, which opens the linked document in the parent frame. In this instance, the parent is the whole frameset.
- Frame 4 has a target _blank attribute, which opens the linked document in the full body of the browser window.
This is all totally unnecessary now as there are now much better ways to lay pages out than there were years ago when frames were in use. As all this is deprecated. Just thought I would show it for context on the the target attribute, and to explain why we don't use the other possible values any longer.
THE _blank ATTRIBUTE
So the only value we should apply to the target attribute now is the _blank attribute, which is the one which opens pages in a new tab. Opening links in a new tab, is of course a change in default behavior. Links opening within the same page, or within the current context is the default behavior of our links.
So, if no target is specified, then links will open in the current context, unless the user or browser specifies otherwise. Specifying otherwise is what we’re doing with target attribute with the value of blank.
KEYBOARD SHORTCUTS
It is also worth noting that modern browsers have shortcuts that can force a link to open in a new window by pressing shift and clicking it. Or in a new tab by holding cmd or ctrl and clicking on it.
If these keyboard shortcuts were more widely known, and I imagine they will be over time, then both behaviors of opening in a new window or in a new tab are available to users for all links everywhere all of the time. So if your preference is to open in new tabs, then with this keyboard shortcut of holding cmd or ctrl and clicking, you can. If you prefer links to open within the current browsing context, you can do that without the developer forcing how links behave on you. By using target="_blank", only that behaviour is available to the user.
NOOPENER & NOREFERRER
If you are going to do use target blank in links, you should add another attribute called the rel attribute for security.
When you open a link to a web page using target="_blank", the other page may run on the same process as your page, so it can can access your something called the window object, with the window.opener property. This exposes a potential attack surface because the other page could potentially redirect your page to a malicious URL.
So,when you use target="_blank", always add the rel attribute as well with the properties of rel="noopener" or rel="noreferrer", or both using rel="noopener noreferrer", with the two values separated by a space.
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Click this link to open Google in a new tab </a>Click this link to open Google in a new tabrel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
There’s some more in depth information on this here from Google's web.dev site.
BASE
The last thing we’ll talk about is the <base> element. There can be only one <base> element in a document, and it goes inside the <head> section of our HTML file.
The <base> element allows us to set specific rules for all of the links in our HTML document. So one example is that we might want all links to open in a new tab using target="_blank" and we want all of them to have the rel="noopener noreferrer" attribute set. Once this is set with the <base>, then all subsequent links will use the starting conditions of opening in a new tab with noreferrer and noopener.
The <base> element in an empty element, which means it is made with a single self-closing tag.
<base target="_blank" rel="noopener noreferrer" />With this in place in the <head> each link will now open in a new tab, and it will do so safely and securely. We don't need to add any attributes to the actual anchor <a> tags elements themselves. Just one <base> element that sets all of the rules or conditions that will be applied to all of the links on the page.
Essentially, what we are doing with the <base> element is setting defaults for all of our links, or base settings. Also, the <base> element must appear before any element that refers to an external resource.
If we do want select links on the page to behave differently to the conditions we set in the <base>, we can simply override what is in the base element by adding attributes directly in the opening a <a> tag of the link we want to behave differently.
<base target="_blank" rel="noopener noreferrer" />
The _self value will override the target="_blank" specified in the <head>. The rel attribute and values of noopener & noreferrer are still applied.<a href="#" target="_self">Click this link!</a>SUMMARY
Ok, this is a great place for us to stop as we’ve covered a fair amount of info in this section. To recap, we have looked at link targets and the <base> element. We have seen that the target attribute can have four possible values, but three of these aren’t really used anymore, as they were intended for use with HTML frames, which are now deprecated and no longer in use on the web.
We saw the one value we can use = target="_blank", allows us to open links in new tabs rather than in the current browsing context. We also looked at reasons why we might want to steer clear of using this, given that users can control how links open themselves with keyboard shortcuts provided by all modern browsers.
We then looked at keeping our links with target _blank safe using noopener and noreferrer, and we finished off by looking at the <base> element which enables us to set default rules or conditions for all of the links on our page.
I hope you found all this informative and now have some extra little tricks that you can do with your links. You now have a little more power over how and where you anchor elements are opening.