Resolving URLs
When resolving any URL for any element in an HTML document — for example, the href of an <a> element, or the src of an <img> element — by default, HTML resolves the URL relative to a base URL.
This base URL is initially the very URL of the underlying HTML document.
For example, consider the following example of a file hello.html accessible as https://example.com/hello.html (a hypothetical URL):
<!DOCTYPE html>
<html>
<head>
<title>Hello from HTML!</title>
</head>
<body>
<h1>Hello from HTML!</h1>
<img src="images/hello.svg" alt="Hand wave illustration">
</body>
</html>Take note of the value assigned to the src attribute of <img>. It's a relative path URL. The browser will resolve this URL relative to the base URL of the document, which is https://example.com/hello.html.
The resolved URL becomes https://example.com/images/hello.svg.
Resolving a given URL to get a complete, absolute URL is necessary because it's only an absolute URL that contains all the information required to get to a resource on the web.
For instance, the URL images/hello.svg on its own doesn't carry any sort of information as to where exactly is the underlying resource located. However, when we resolve this URL to get the complete URL, https://example.com/images/hello.svg, we know rightaway where the resource is located.
HTML allows us to modify the base URL for a given HTML document by using the <base> element.
The <base> element
The <base> element serves a very simple purpose:
<base> element specifies the base URL of an HTML document.The href attribute is used to specify the base URL in a <base> element.
The base URL specified in <base> doesn't itself have to be an absolute URL; it can well be a relative URL. In that case, the base URL is resolved relative to the (absolute) URL of the underlying HTML document.
Note that <base> can only go inside the <head> element in HTML. Furthermore, it must be the first element because, due to its presence, the browser resolves all URL-related attributes of HTML elements relative to whatever base URL it specifies.
Keep in mind that it's invalid to have more than one <base> element per document.
In addition to specifying the base URL, the <base> element also carries the ability to specify the default target to use when following hyperlinks and submitting forms. We'll explore more details to this in the section below, where we discuss the target attribute of <base>.
So, all in all, <base> either allows us to modify the base URL of an HTML document or the default target for links (and form submissions); there's no third use case for it.
<base> element with no href and target attribute — an empty <base> is just completely useless!The href attribute
The href attribute is used to specify the base URL corresponding to a <base> element.
As specified earlier, href doesn't have to contain an absolute URL; it can contain any kind of URL we're used to specifying for other URL-related attributes in HTML (e.g. src for <img>, href for <a>).
By virtue of a <base> element with an href in an HTML document, all subsequent URL-related attributes get resolved based on that URL.
Let's take an example.
Suppose we have the following HTML document, with the path /courses/html/examples/no-base.html:
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>To learn HTML, visit our <a href="courses/html/">HTML course</a>.</p>
</body>
</html>Obviously, because there is no <base> element here, the base URL is the URL of the document itself. Thus, the <a> element's href gets resolved relative to the URL of the document, and essentially boils down to https://www.codeguage.com/courses/
If we follow the hyperlink, we'll get a 404 Not Found error because there is no such endpoint on our website.
Now, let's incorporate the <base> element to rectify this link's href to https://www.codeguage.com/courses/html/, without even touching the a element.
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Learn HTML</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>To learn HTML, visit our <a href="courses/html/">HTML course</a>.</p>
</body>
</html>The <base> element sets the base URL to / which itself resolves to https://www.codeguage.com/. Thereafter, the href value of "courses/html" gets resolved to https://www.codeguage.com/courses/html/.
href attribute of <a> in the first place, i.e. "/courses/html", we wouldn't have had to use <base> — this is because absolute-path references always get resolved relative to the root URL.The target attribute
Besides specifying the base URL, <base> can also be used to specify the default target to use when following hyperlinks and submitting forms.
The default target is used when a hyperlink or form doesn't have its own configured target (via the target attribute).
For example, when we click on a hyperlink (<a> element) on a webpage, the browser opens up the link (which is referred to as following the link) in the same window where the current webpage is displayed. Using the target attribute on the <a> element, we can modify this behavior for this link. But using <base>, we can modify this behavior for all links.
For specifying the default target, we use the target attribute of <base>. The possible values are the same as those for the <a> element:
"_self"— open a link in the same window as the current one. This is the default."_blank"— open a link in a separate, new window."_parent"— open a link in the parent window."_top"— open a link in the top-most window.- A custom value, referring to the name of an iframe.
target attribute.Let's say we want all links in an HTML document to open up in a new window.
One way is to go over to each link and set target="_blank" on it. But clearly, this is a lot of work. A simpler way is to set the <base> element and configure its target to "_blank".
This is demonstrated as follows:
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<title>Learn HTML and CSS</title>
</head>
<body>
<h1>Learn HTML and CSS</h1>
<p>To learn HTML, visit our <a href="/courses/html/">HTML course</a>.</p>
<p>To learn CSS, visit our <a href="/courses/css/">CSS course</a>.</p>
</body>
</html>Open the example above and click on either of the links — you'll notice the link opened up in a separate window, thanks to the configuration of the default target by the <base> element.
