{"id":23284,"date":"2020-03-04T21:15:45","date_gmt":"2020-03-04T13:15:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23284"},"modified":"2022-07-15T17:01:21","modified_gmt":"2022-07-15T09:01:21","slug":"html-base-element","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-base-element\/","title":{"rendered":"Specifying Document Base URL With HTML <base> Element"},"content":{"rendered":"

Websites are built with a series of links, pointing to pages and sources like images and stylesheets. There are two ways to specify the URL that links to these sources<\/strong>: either use an absolute path or relative path.<\/p>\n

The absolute path refers to specific destination, typically it\u2019s started with the domain name (along with HTTP) like www.domain.com\/destination\/source.jpg<\/code>. The relative path is the opposite: the link destination depends on the root location or in most cases the domain name of your website.<\/p>\n

A typical relative path would look like this below:<\/p>\n

\r\n<img src=\"\/assets\/img\/image.png\" alt=\"\">\r\n<\/pre>\n
If your website domain is, for example, hongkiat.com<\/code> the image path would resolve to hongkiat.com\/assets\/img\/image.png<\/code>. You should understand this if you have been developing website for a while.<\/p>\n
But most of you probably have not heard about the <base><\/code> element. This HTML tag has been around since HTML4, yet very little is seen of its implementation in the wild. W3C describes this element<\/a> as:<\/p>\n
\u201cThe base element allows authors to specify the document base URL<\/strong> for the purposes of resolving relative URLs, and the name of the default browsing context<\/strong> for the purposes of following hyperlinks.\u201d<\/em><\/p>\n
This <base><\/code> element basically decides the base URL for relative path in web pages. Instead of depending on the root location or the domain of your website, you can point it out to somewhere else, perhaps like the URL where your resources reside in CDN (Content Delivery Network). Let\u2019s see how that actually works.<\/p>\n
Using the Base Element<\/h2>\n
The <base><\/code> is defined along side the <meta><\/code> and <link><\/code> tags within the <head><\/code>. Given the following example, we set the base URL to Google.<\/p>\n
\r\n<base href=\"http:\/\/hongkiat.maxcdn.com\/assets\/\">\r\n<\/pre>\n
This specification will affect all the paths within the document, including one that is specified within the href<\/code> attribute and the src<\/code> of the images. So, assuming we have a stylesheet, images, and links in the document set with a relative path like this, for example:<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"path\/main.css\">\r\n<a href=\"path\/page\/sub-page\/\">Anchor Link<\/a>\r\n<img src=\"path\/image.jpg\">\r\n<\/pre>\n
Even though our web page is under demo.hongkiat.com<\/code> the relative path will refer to hongkiat.maxcdn.com<\/code>, following the base path specified in the <base><\/code> tag. Try hovering over the link, and the browser will show you where the path is exactly heading to.<\/p>\n
\"url<\/figure>\n
All the relative paths will eventually be:<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"http:\/\/hongkiat.maxcdn.com\/assets\/path\/main.css\">\r\n<a href=\"http:\/\/hongkiat.maxcdn.com\/assets\/path\/page\/sub-page\/\">Anchor Link<\/a>\r\n<img src=\"http:\/\/hongkiat.maxcdn.com\/assets\/path\/image.jpg\">\r\n<\/pre>\n
Setting the Default Link target<\/h2>\n
Aside from defining the base URL, the <base><\/code> tag can also set the default link target through the target<\/code> attribute. Say you want all the link in the document to open in the browser new tab<\/strong>, set the target<\/code> with _blank<\/code>, like so.<\/p>\n
\r\n<base href=\"http:\/\/hongkiat.maxcdn.com\/assets\/\" target=\"_blank\">\r\n<\/pre>\n
Limitations<\/h3>\n
The <base><\/code> tag, however, holds a couple of caveats in some circumstances:<\/p>\n
First, the <base><\/code> browser support is great; it works in IE6. But, IE6 thinks that it requires a closing tag <\/base><\/code>. This could cause a hierarchy issue in the document, if the closing tag is left unspecified. A simple quick way to address this issue is by adding <\/base><\/code> closing within a comment, <!--[if lte IE 6]><\/base><![endif]--><\/code>.<\/p>\n
If you are using #<\/code> in conjunction with the <base><\/code> to link to sections within the document, you may potentially encounter an issue in Internet Explorer 9. Instead of jumping to the referred section, Internet Explorer 9 will reload the page.<\/p>\n
Furthermore, a blank href<\/code> will result in the base URL instead of linking to the current directory where the page resides (this is default browser behavior), which could cause unexpected referencing issues.<\/p>\n
Wrap Up<\/h2>\n
The <base><\/code> is a handy HTML feature that may simplify link referencing in a web document. Use the tag considerately to minimize the pitfalls. Follow these reference below for more on the <base><\/code> tag:<\/p>\n