How to use the HTML <base> tag
![[ How to use the base tag ]](https://perishablepress.com/wp/wp-content/images/2017/html-base-tag.gif)
When every byte counts, you can use the HTML <base> tag to specify a default href and target attribute for all relative URLs on the page. Like a virtual shortcut.
For smaller sites with a flat directory structure, this isn’t going to help much; but for sites with deeply nested directories, the <base> tag can potentially shave a lot of extra weight from your web pages, and also help keep URLs cleaner and shorter.
So if you’re micro-optimizing for performance, the <base> tag can help you out.
Benefits of the base tag
Here are some benefits of using the <base> tag:
- Reduces page weight
- Saves bandwidth
- Shorter URLs
- Cleaner markup
- Helps when viewing pages offline
- Makes migration easier (change one link instead of many)
- Can make it easier to redirect all relative URLs
Even with these great benefits, not a lot of pages take advantage of the base tag. This might be because the tag is misunderstood and/or not well known, or perhaps it’s because of the potential downsides.
Potential downsides of the base tag
Before using the base tag in your next project, consider these possible downsides:
- Can cause problems for transparent URL rewrites
- Can cause problems on some very old browsers
Here is a test and results for base tag and browser support. So really browser support is a non-issue unless you need to support the most archaic of browsers.
That leaves only one real issue that you need to be aware of; if your site is using any sort of transparent rewrite (tip: this is different than a URL redirect), then it’s probably best to avoid the base tag unless you know what you are doing.
Example: Specify the default URL
The technique actually is pretty simple. Let’s look at an example of using the <base> tag to specify the default URL, which will be applied to all relative URLs on the page, including all src and href attributes. This means that the base tag works on images, hyperlinks, iframes, forms, scripts, styles, and any other tag that uses either src or href to reference a URL.
For example, say that you keep all of your images nested deep somewhere, like:
http://example.com/here/is/my/deeply/nested/set/of/images/example.jpg..which as we know can be written as a relative path:
/here/is/my/deeply/nested/set/of/images/example.jpgThat’s a bit better size-wise, but it’s still gonna add some bytes, especially if multiple images are included on the page. For an entire gallery of images, for example, using that entire path for every image really would pack on the extra weight. Fortunately, we can do much better by specifying a default URL via the <base> tag. To do so, we would add the following code to the head section of our web page(s):
<head>
<base href="http://example.com/here/is/my/deeply/nested/set/of/images/">
</head>With that in place, we can exclude the entire path for all of our image files. So instead of doing this for an image gallery:
<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-03.jpg" alt="">
.
.
...we can do this instead:
<img src="example-01.jpg" alt="">
<img src="example-01.jpg" alt="">
<img src="example-03.jpg" alt="">
.
.
.Depending on the number of images (or whatever files you’re using), the <base> tag can really help reduce page weight and keep markup clean and manageable.
Example: Specify the default target
The <base> tag can also be used to specify the default target attribute for any supportive elements (e.g., links, forms, iframes, et al). For example:
<head>
<base target="_blank" href="http://example.com/your/default/path/">
</head>With that in place, we can exclude the target attribute on our links. So instead of writing this for every link on the page:
<a target="_blank" href="somewhere.html" rel="noopener noreferrer">Example Link</a>..we can just do this:
<a href="somewhere.html">Example Link</a>..which further reduces overall page weight. Sure it’s not gonna be huge amount of savings, but every little bit helps when optimizing for performance.
Excluding URLs from the default base value
What if you want to include links or images that are located in a different location than that specified by the <base> tag? Easy. Base works only on URLs that are relative to the base URL. For example, say we reference the following URLs on the page:
http://example.com/something/somewhere/
/something/somewhere/
something/somewhere/Without the <base> tag, these URLs would be treated at face value. So now let’s add a default URL via <base>:
<base href="http://example.com/default/directory/">With that in place, our previous example URLs change to this:
http://example.com/something/somewhere/
/something/somewhere/
http://example.com/default/directory/something/somewhere/Notice how the base value is not applied to the first and second URLs? It’s only applied to the third URL. So to exclude any URL from the base tag, we can simply use an absolute URL, or use a URL that begins with a forward slash, /. Neither of these URLs will be affected by the base tag. So it’s really quite an elegant solution once you understand how it works.
Browser support
The <base> tag is supported by all major browsers, including:
- Chrome
- Firefox
- Opera
- Safari
- Internet Explorer
Notes
Here are some useful notes on the <base> tag:
- You must use absolute URLs for fragment identifiers, like
#foobar - You must use absolute URLs for query-string URLs, like
?foo=bar - Always include trailing slash on the base URL (so it’s a directory, not a file)
- The base tag must be included in the
<head>section - There can only be one base tag per web page
- The base tag must specify an
hrefattribute,targetattribute, or both - Put the base tag before any other tags in the head section in order to use it for script URLs, style URLs, et al
I hope this article helps shed some light on this useful HTML element. If you have experience with <base>, please share in the comments. More information on this tag is welcome :)
2 responses to “How to use the HTML <base> tag”
Great article. Never used this base tag method before.
Thanks dude, very helpful stuff. i still dont know about this html tag…