Base URLs

Learn How the <base> Element Sets a Base URL for Relative URLs in an HTML Document

Understanding the <base> Element

The <base> element can specify the base URL used to resolve relative URLs throughout an HTML document and can also establish a default browsing context for certain links and forms.

The <base> element is placed in the document's <head> and affects URLs elsewhere in the page, so it should be used carefully. Most webpages do not need a <base> element because relative URLs are normally resolved using the document's own URL.

Base Element Syntax

The base element is a void element, which means it does not contain content and does not use an end tag.

<base href="https://www.example-web.site/tutorials/">

The base element can use the href attribute to establish a base URL, the target attribute to establish a default browsing context, or both.

<base href="https://www.example-web.site/tutorials/" target="_blank">

An HTML document can contain only one base element.

Where to Place the <base> Element

The base element belongs inside the document's head.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="https://www.example-web.site/tutorials/">
    <title>HTML Tutorial</title>
  </head>
  <body>
    ...
  </body>
</html>

Because the base URL can affect other URLs in the document, the base element should appear before elements containing URLs that you intend it to affect.

The Default Base URL

When a document does not contain a base element, relative URLs are normally resolved using the document's own URL.

Suppose this page is located at:

https://www.example-web.site/html/tutorials/links.html

A relative URL such as:

<a href="images.html">HTML Images</a>

would normally resolve relative to the document's location:

https://www.example-web.site/html/tutorials/images.html

This default behavior is sufficient for most webpages, which is why a base element is not normally required.

The href Attribute

The href attribute on the base element establishes the document's base URL.

<base href="https://www.example-web.site/html/">

Relative URLs in the document are then resolved using this URL instead of the document's own location.

For example:

<a href="tutorials/elements.html">HTML Elements</a>

With the base URL shown above, the link resolves to:

https://www.example-web.site/html/tutorials/elements.html

The trailing slash in a base URL is significant because URL resolution follows URL rules rather than simply joining two text strings.

How <base> Affects Relative URLs

A base URL can affect many relative URLs throughout an HTML document, not just links created with the a element.

Consider this document head:

<base href="https://www.example-web.site/assets/">

Relative URLs elsewhere in the document are resolved against that base URL:

<a href="help.html">Help</a>
<img src="images/logo.png" alt="Website Logo">
<link rel="stylesheet" href="css/styles.css">

These URLs resolve using the specified /assets/ location rather than the directory containing the HTML document.

https://www.example-web.site/assets/help.html
https://www.example-web.site/assets/images/logo.png
https://www.example-web.site/assets/css/styles.css

This document-wide behavior is useful in some situations, but it also means that adding or changing a base element can unexpectedly affect many existing URLs.

Base URLs & Root-Relative URLs

A root-relative URL begins with a forward slash and is resolved from the root of the current website rather than from the current document directory.

<a href="/html5/tutorials/elements.html">HTML Elements</a>

If the page is being viewed on https://www.example-web.site, this URL refers to:

https://www.example-web.site/html5/tutorials/elements.html

A base URL with a different directory path does not prepend that directory to a root-relative URL. The leading slash starts the path at the URL's origin.

This is one reason root-relative URLs are often convenient for links and resources within the same website: their paths do not depend on how deeply the current HTML document is nested within the site's directories.

The target Attribute

The target attribute on the base element establishes a default browsing context for hyperlinks and forms that do not specify their own target.

<base target="_blank">

With this declaration, qualifying links without their own target value use _blank as the default:

<a href="help.html">Help</a>

A link can provide its own target attribute when different behavior is required:

<a href="help.html" target="_self">Help</a>

Setting a document-wide target can change the behavior of many links at once, so it should be used only when that behavior is intentional and appropriate for the website.

A base element can also affect URLs that contain only a fragment identifier, which can be surprising if you expect the link to remain on the current page.

Without a different base URL, a link such as:

<a href="#summary">Summary</a>

normally refers to the element with id="summary" in the current document.

If the document contains:

<base href="https://www.example-web.site/tutorials/page.html">

the fragment URL is resolved against that base URL:

https://www.example-web.site/tutorials/page.html#summary

This is an important side effect to consider on pages that use fragment links for navigation, tables of contents, or links to sections within the page.

When to Use <base>

The base element can be useful when a document contains many relative URLs that should all be resolved from a location other than the document's own URL.

Possible situations include generated documents, templates, previews, or documents whose resources need to resolve consistently from a known location.

However, a normal website with a straightforward directory structure generally does not need a base element. Standard relative, root-relative, and absolute URLs can usually provide clearer and more predictable linking behavior.

If you do use base, remember that its effect is document-wide. Always consider existing links, images, stylesheets, scripts, forms, and fragment URLs before adding or changing it.

Common <base> Element Mistakes

The most common problems with the base element occur because its effect extends beyond the line of markup where it appears.

  • Adding a base element when the document does not actually need one.
  • Forgetting that the base URL affects relative URLs throughout the document.
  • Using an incorrect base URL and unintentionally breaking links or resources.
  • Forgetting that a trailing slash can change how a relative URL is resolved.
  • Assuming a directory in the base URL is added in front of root-relative paths.
  • Forgetting that a base URL can affect fragment-only links such as #summary.
  • Using more than one base element in the same document.
  • Setting a default target without considering how it changes link or form behavior throughout the page.

When links suddenly resolve to unexpected locations, checking for a base element in the document head is a useful troubleshooting step.

<base> Element Best Practices

The base element should be used deliberately because it changes the URL-resolution behavior of the entire document.

  • Use base only when the document needs a different base URL or default target.
  • Include no more than one base element in a document.
  • Place it in the document head before URLs that depend on it.
  • Check links, images, stylesheets, scripts, forms, and fragment links after introducing a base URL.
  • Pay attention to whether the base URL ends with a forward slash.
  • Do not use base simply to avoid learning how relative and root-relative URLs work.
  • Prefer straightforward URL structures when they make the document easier to understand and maintain.

For most beginner websites, leaving out the base element and using normal relative or root-relative URLs is the simplest approach.

Summary

The base element establishes a base URL for resolving relative URLs and can establish a default target for hyperlinks and forms. It is a void element placed in the document's head, and a document can contain only one base element.

Most webpages do not need a base element because relative URLs are normally resolved from the document's own URL. When base is used, its document-wide effect should be carefully considered because it can change how links, images, stylesheets, scripts, forms, and fragment URLs are resolved.

See Also:
The Document Head
Linking External Resources
Attributes
Creating Your First Web Page

« Previous HTML Home Next »