The <base /> element

19.05.19 #didyouknow

A recent tweet from the twitter-verse revealved an existent, but relatively unkown piece of functionality for anchor tags in the form of a base element. Let's look at the following:

<base target="_blank" />
<a href="http://google.com">Google</a>
<a href="http://bing.com">Bing</a>

What's that base element doing ? It works as a 'base' to the behavior of all anchor tags. In this case with the target attribute set to _blank, ALL anchor tags will open in a new tab 🤯! Inspect the elements below to see the absence of a target attribute, but clicking them will still open the content in a new tab:

Google | Bing

You can also make all your links in a page point to a different URL and do something like this:

<base href="http://www.pets.com/" />
<a href="#dogs">Dogs</a>
<a href="#cats">Bing</a>

The first anchor element will point to http://www.pets.com/#dogs and the second would point to http://www.pets.com/#cats. 😃

~ zano

Last Updated: 6/25/2019, 8:35:41 AM