The <base> tag in HTML is a comparatively little identified aspect, having develop into a completely fledged a part of HTML5 fairly just lately. It allows you to do two issues:
- Set any URL you select as the bottom for all relative URLs.
- Set default hyperlink targets.
The Base-ics
The <base> aspect is outlined within the <head> part and you’ll solely use it as soon as per doc. It’s best to place it as early as attainable in your head part so you should utilize it from that time on. Its two attainable attributes are href and goal. You should use both of those attributes alone or each without delay.
Instance 1: Asset Loading Shortcut
For example you might have a website which shops all its photographs and CSS in a folder named “property”. You may outline your <base> tag like so:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/property/"> |
3 |
</head>
|
This could then can help you load in any photographs or CSS like this:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/property/"> |
3 |
<hyperlink rel="stylesheet" href="fashion.css"> |
4 |
</head>
|
5 |
<physique>
|
6 |
<img src="image01.png" /> |
7 |
</physique>
|
The hyperlink to fashion.css would resolve to http://www.myepicsite.com/property/fashion.css and image01.png would load from http://www.myepicsite.com/property/image01.png.
Instance 2: Inside Web page URLs
What when you’ve got a prime degree area which redirects to one thing like http://thisrocks.com/app/ and all inside hyperlinks want to incorporate app/ of their URLs.
You may set your base URL like this:
1 |
<base href="http://thisrocks.com/app/"> |
From there everytime you needed to hyperlink from one inside web page to a different you might merely use:
1 |
<a href="anotherpage.htm">LINK</a> |
This hyperlink would resolve to http://thisrocks.com/app/anotherpage.htm.
Instance 3: Default Hyperlink Goal
You can even use <base> to set the default goal for all hyperlinks in your web page. When you have been to make use of:
…any hyperlink that did not explicitly set its personal goal would open in a brand new window. You should use the goal attribute with or with out an accompanying href attribute.
This performance may probably be helpful for content material loaded in through an iFrame, as you’d be capable of routinely have all hyperlinks therein focused to the mother or father body.
Drawbacks
Whereas the <base> url may be useful, its drawbacks focus on the truth that after defining it when you’re caught with it. You possibly can solely use it in a single manner and it’ll then have an effect on all URLs. Wherever you do not wish to use the defaults set in your <base> tag you must particularly override them.
Do you have to use it to resolve to your property folder as we did above, and also you later needed to hyperlink from one web page of your website to a different, you could not achieve this with the widespread HTML of <a href="https://webdesign.tutsplus.com/articles/web page.html">Web page</a>.
It’s because with the bottom URL being http://www.myepicsite.com/property/ your guests can be despatched to http://www.myepicsite.com/property/web page.html.
As such you would need to override your <base> tag settings by utilizing absolutely the URL as a substitute, i.e. <a href="http://www.myepicsite.com/web page.html">Web page</a>.
In-Web page Anchors
When utilizing <base> you may also run into issues linking to in-page anchors.
Usually, a hyperlink resembling <a href="#prime">Again to Prime</a> would maintain you on the identical web page however skip to the placement of a component bearing id="prime", e.g. it might resolve to http://thisrocks.com/app/article.html#prime.
Nonetheless for those who’re utilizing a <base> tag with an href attribute you’d as a substitute be despatched to the bottom URL with #prime appended to the top, e.g. http://thisrocks.com/app/#prime.
Once more, on this case you’d need to override the defaults set in your <base> tag by specifying the web page you need your hyperlink to be relative to, e.g. <a href="article.html#prime">Again to Prime</a>.
The place <base> Works Finest
The <base> tag is greatest utilized in a situation the place you already know you can exert full management over the usage of all URLs, i.e. you already know you can override the defaults as required. When you’re making a theme for a CMS the place there are various unknown variables it is most likely a good suggestion to depart <base> out of the combination.
Nonetheless, for those who’re constructing a static HTML website <base> may be very useful. That is the case much more so for those who’re utilizing a templating language resembling Jade or Handlebars that can allow you to place shortcuts like <a href="{url}#prime">Again to Prime</a>, so if you must override default settings it is nonetheless fast and straightforward.
When you have a good suggestion what your mission’s content material shall be, and its use of URLs and hyperlinks is totally below your management, you may discover the <base> tag saves you lots of time.
Learn extra about <base> on the W3C wiki and HTML5 spec:
