Chapter 4 | The base element
As mentioned in chapter 3, in this chapter we are going to look at an HTML element you may have never heard of. The element under discussion is the base
element.
The base
element is written as self-closing tag. This means that, while a lot of tags are written as follows:
|
|
A self closing tag is written like this:
|
|
The base
element allows you to set a base URL for all links on the current page, set a base browsing context, or both, for all links on the page. π
Letβs look at an example.
|
|
All of those links share the same base URL. π€ Using the base
element, you can avoid repeating the base URL in every link tag:
|
|
NOTE: If the HTML above was on a page that was hosted as part of the Goodreads website, you would not include the URL as part of the link and instead, opt for using relative URLs. In other words, instead of
https://www.goodreads.com/book/show/11588.The_Shining
you will do justbook/show/11588.The_Shining
Now, you may also want those links to always open in a new tab. One option is to do:
|
|
As mentioned, there is a second attribute you can set on the base
element, and that attribute is the target
attribute. We can therefore avoid repeating target
:
|
|
Live Codepen
With the above in place, all links in the current page will use https://www.googreads.com
as its base URL and all links will open in a new tab. Interesting right?
Thing is, it does mean that all “links” will have this behaviour. This means that not only are anchor tags are affected, but that it will affect all elements with an href
attribute set. For example:
|
|
In the above scenario, the browser will attempt to load the stylesheet from the Goodreads website, which is probably not what you intended. Thankfully, the base
element only affects elements below it in source order, so changing the above to the following will solve that problem:
|
|
Remember that _blank
is not the only possible value for the target
attribute. One other value is _top
. Using _top
as the value of target
might be useful as a means of frame busting aka, prevent your site from being displayed in an iframe
.
|
|
While this will not prevent the site from initially being loaded in an iframe
, it will cause clicks on any links in the page to bust out of the iframe
by setting its browsing context to the topmost browsing context i.e. the browser window itself.
I will close this chapter with an example use case that might be a bit of a stretch. I am using a combination of the base
element, a specific CSS class
on certain elements, and some JavaScript. The result is something that could be useful in a web applications.
|
|
With the above, clicks on any link that has a class
attribute with the value native
will be intercepted by JavaScript and opened in the same tab/window. All other links will open in a new tab. One interesting aspect to note about the above is that, even when intercepted by JavaScript, the value of event.target.href
will use the base href
value defined on the base
element, for example https://www.goodreads.com/add-book
. So be careful π
Some final notes. There must be no more than one base
element per page. If there are multiple, all but the first will be ignored. As with href
, all elements that have a target
attribute set are affected by the value of the target
attribute of the base
element. This means that forms with a target
will also be affected.
The URL parsing algorithm works as follows (from the W3C documentation):
|
|
Knowing the above might well open up some additional use cases for this element. I am curious to know what use cases people come up with using the base
element. If you stumble on or devise some interesting use case, let me know!