The <BASE> tag has been a part of HTML for decades now, and little has changed with the tag itself as we’ve transition to 2018. At its core, the <BASE> tag creates a document base – off which relative hyperlinks in the body of the document will go.

Change The Base URL For All Links On A Page

By default, all relative links on a website will act off the domain on which they are called. For example, if I added  relative link to /contact from this page – the base would be https://rapidpurple.com.





/contact

Demo: /contact

However if I were to define the base tag with an HREF attribute set to https://mediaexplode.com, watch what happens to the same link:





/contact

Demo: /contact

Whenever you set the <BASE> tag, all relative links on that page will refer to the specified URL rather than the server on which the page is hosted. Take note that this also applies to same-page anchor tags, like #anchor, or ?anchor. As such – combining <BASE> tags with various javascripts is generally not a great idea.

Changing The Target For All Links On A Page

The <BASE> tag has another great purpose – it can be used to easily set all links on a page to open in a new window, or a specific frame. This can be accomplished using the second attribute supported by <BASE>, the target attribute.

For example, if we wanted to make all links open in a new window, we could set our target attribute to _blank, just like we would for a regular link.




Just keep in mind that there can be only be one defined <BASE> within a document, and it must be inside the <HEAD> element.

Published by Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Leave a comment

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