A base URL is the foundational address from which all other URLs on a website are constructed, the common root that all pages on a site share. In its simplest form the base URL is the protocol and domain combination, https://example.com: that prefixes every page address on the site. https://example.com/products/blue-widget, https://example.com/blog/redirect-guide, and https://example.com/about all share the same base URL, https://example.com: which is the root from which the complete addresses are built by appending paths.

The term base URL is used in two distinct but related contexts, the conceptual base URL that represents a site’s root address, and the technical HTML <base> element that explicitly sets a base URL for resolving relative URLs within a document. Understanding both contexts prevents confusion, the conceptual base URL is a structural concept, the HTML base element is a specific technical implementation that affects how browsers and crawlers resolve relative references within a page.

Base URLs are foundational to how the web’s addressing system works, the domain component of every URL is effectively a base address that contextualises everything that follows. In redirect management base URLs are important for understanding how redirect rules are scoped, whether a redirect applies to all URLs under a domain, to a specific subdirectory, or to individual paths, and for ensuring that redirect configurations correctly resolve relative and absolute URL references.

The conceptual base URL

In its most common usage base URL refers to the root address of a website, the protocol, domain, and any consistent path prefix shared by all URLs in the context being discussed.

Domain-level base URL: the most common form. https://example.com is the base URL for all pages on example.com. Every page URL on the site is formed by appending a path to this base, https://example.com + /products/blue-widget = https://example.com/products/blue-widget. The base URL provides the common foundation, protocol and domain, that every page address builds on.

When discussing a site’s URL structure in general the base URL is typically the protocol-plus-domain combination. API documentation, redirect configurations, and URL management tools frequently reference the base URL as the fixed prefix to which variable path components are appended.

Subdirectory base URLs: for sections of a site hosted in a specific subdirectory the base URL for that section includes the subdirectory path. A blog section at https://example.com/blog/ has a base URL of https://example.com/blog/: all blog post URLs share this common prefix. A documentation section at https://example.com/docs/ has its own base URL for that section.

Subdirectory base URLs are relevant when configuring redirects for specific site sections, a redirect rule scoped to https://example.com/blog/* applies to all URLs under the blog base URL, while a rule for https://example.com/docs/* applies to the documentation section.

Subdomain base URLs: when content is hosted on a subdomain the base URL includes the subdomain, https://blog.example.com or https://app.example.com. Each subdomain has its own base URL, distinct from the root domain base URL. Redirect configurations must address each subdomain’s base URL separately, a redirect rule for https://example.com/* does not automatically apply to https://blog.example.com/*.

API base URLs: in API development the base URL is the root endpoint from which all API paths are constructed. https://api.example.com/v2 might be the base URL for an API, all endpoints are formed by appending paths, https://api.example.com/v2/users, https://api.example.com/v2/products. API base URL changes, moving from v1 to v2, changing the subdomain, require redirect configurations to maintain backward compatibility.

The HTML base element

The HTML <base> element provides a technical mechanism for explicitly declaring a base URL for a document, overriding the default base URL that browsers use when resolving relative references.

How the base element works: placed in the HTML <head> section the <base> element sets the base URL that the browser uses to resolve all relative URLs within the document:

<!DOCTYPE html>
<html>
<head>
  <base href="https://example.com/blog/">
  <title>Article Title</title>
</head>
<body>
  <!-- This resolves to https://example.com/blog/redirect-guide -->
  <a href="redirect-guide">Redirect Guide</a>
  
  <!-- This resolves to https://example.com/products/widget -->
  <a href="/products/widget">Widget</a>
  
  <!-- This resolves to https://example.com/blog/images/photo.jpg -->
  <img src="images/photo.jpg" alt="Photo">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <base href="https://example.com/blog/">
  <title>Article Title</title>
</head>
<body>
  <!-- This resolves to https://example.com/blog/redirect-guide -->
  <a href="redirect-guide">Redirect Guide</a>
  
  <!-- This resolves to https://example.com/products/widget -->
  <a href="/products/widget">Widget</a>
  
  <!-- This resolves to https://example.com/blog/images/photo.jpg -->
  <img src="images/photo.jpg" alt="Photo">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <base href="https://example.com/blog/">
  <title>Article Title</title>
</head>
<body>
  <!-- This resolves to https://example.com/blog/redirect-guide -->
  <a href="redirect-guide">Redirect Guide</a>
  
  <!-- This resolves to https://example.com/products/widget -->
  <a href="/products/widget">Widget</a>
  
  <!-- This resolves to https://example.com/blog/images/photo.jpg -->
  <img src="images/photo.jpg" alt="Photo">
</body>
</html>

The <base href="https://example.com/blog/"> declaration means all document-relative URLs, those without a leading slash, are resolved relative to https://example.com/blog/. Root-relative URLs, with a leading slash, are still resolved relative to the domain root.

The target attribute: the <base> element also supports a target attribute that sets the default browsing context for all hyperlinks and forms in the document:

<base href="https://example.com/" target="_blank">

<base href="https://example.com/" target="_blank">

<base href="https://example.com/" target="_blank">

This target="_blank" declaration makes all links on the page open in a new tab by default, without needing to add target="_blank" to each individual link.

Single base element per page: only one <base> element is valid per HTML document. Multiple <base> elements are invalid, browsers use only the first one and ignore subsequent ones. The <base> element must appear in the <head> section and before any elements that use URLs, <link>, <script>, <img>, and others.

Base URLs and relative URL resolution

The base URL, whether the implicit default or an explicitly declared <base> element, is what browsers use to resolve relative URLs into complete absolute URLs.

Default base URL determination: in the absence of a <base> element the browser uses the page’s own URL as the base URL for resolving relative references. A page at https://example.com/blog/redirect-guide has an implicit base URL of https://example.com/blog/redirect-guide: document-relative URLs are resolved from this base.

Root-relative URLs, beginning with /: are always resolved from the domain root regardless of the base URL. /products/widget resolves to https://example.com/products/widget from any page on example.com.

Base URL affects all relative references: when a <base> element is present it affects every relative reference in the document, not just anchor links but also image sources, stylesheet links, script sources, form actions, and any other attribute containing a URL. This broad effect makes the <base> element powerful but potentially dangerous, an incorrect <base> declaration breaks all relative references on the page.

Fragment links and the base element: a subtle interaction between <base> elements and fragment links, anchor links using #. Without a <base> element <a href="#section"> links to a section within the current page, the default behaviour. With a <base> element set to a different URL <a href="#section"> links to a fragment on the base URL’s page, not the current page. This unexpected behaviour catches developers off guard, explicit absolute URLs or careful base URL management are needed for in-page anchor navigation when a <base> element is present.

Base URLs in redirect management

Base URLs are a key concept in structuring and scoping redirect configurations, redirect rules are defined relative to base URLs.

Domain-level redirect rules: a redirect configured for a base URL covers all traffic to that domain. A rule redirecting https://old-domain.com/* to https://new-domain.com/* uses the old domain as the base URL, all URLs sharing that base are redirected. This domain-level scope is appropriate for domain migrations and brand protection domain redirects where every URL on the source domain should redirect to the equivalent URL on the destination domain.

Subdirectory redirect rules: when only a specific section of a site is being redirected the base URL for the rule includes the subdirectory. A redirect for https://example.com/old-blog/* to https://example.com/blog/* scopes the rule to the old-blog subdirectory base URL, only URLs under that path are redirected. Traffic to other sections of https://example.com is unaffected.

Base URL changes in API migrations: API version upgrades frequently change the base URL, https://api.example.com/v1/* to https://api.example.com/v2/*. Redirect rules from the old base URL to the new base URL maintain backward compatibility for clients using old API endpoints. The redirect preserves the path component appended to the base, a request to https://api.example.com/v1/users redirects to https://api.example.com/v2/users through a base URL change redirect rule.

Subdomain to subdirectory migrations: moving content from a subdomain base URL to a subdirectory base URL, https://blog.example.com/* to https://example.com/blog/*: is a common site consolidation pattern. The redirect rule maps the old subdomain base URL to the new subdirectory base URL, preserving the path component after the base. https://blog.example.com/redirect-guide redirects to https://example.com/blog/redirect-guide: the /redirect-guide path component is preserved while the base URL changes from subdomain to subdirectory.

Base URLs and canonical tags

Canonical tags must use absolute URLs, and the base URL context determines whether relative canonical tags are resolved correctly.

Absolute canonical URLs include the base URL: a canonical tag <link rel="canonical" href="https://example.com/page"> explicitly includes the full base URL, https://example.com: making the canonical declaration unambiguous. The canonical URL is fully specified regardless of the context in which the page is accessed.

Relative canonical tags and base URL interaction: while absolute URLs are strongly recommended in canonical tags some implementations use relative canonical URLs, <link rel="canonical" href="/page">. When a <base> element is present the relative canonical URL is resolved against the declared base URL, which may or may not produce the intended canonical URL. A <base href="https://staging.example.com/"> combined with <link rel="canonical" href="/page"> would produce a canonical pointing to https://staging.example.com/page: incorrect for a production page. This interaction is a specific risk of using relative canonical URLs alongside <base> elements.

Consistent base URL in canonical tags across site sections: all canonical tags throughout a site should reference the same canonical base URL, the same protocol, subdomain, and domain. Mixing https://example.com and https://www.example.com as the base URL in canonical tags across different pages creates inconsistent canonical signals. Establishing and enforcing a canonical base URL, https://example.com or https://www.example.com but not both, ensures canonical consistency.

Common base URL mistakes

Incorrect <base> element URL: setting the <base> element to an incorrect URL, a staging domain, an HTTP URL on an HTTPS site, or an outdated domain, breaks all relative URL resolution on the page. Every relative link, image, stylesheet, and script reference on the page resolves incorrectly. The <base> element should be verified as part of every deployment to production.

Missing trailing slash in <base> href: setting <base href="https://example.com/blog"> without a trailing slash causes document-relative URLs to resolve unexpectedly. images/photo.jpg resolves to https://example.com/images/photo.jpg rather than https://example.com/blog/images/photo.jpg: the last segment blog is treated as a file rather than a directory. Base URLs intended to represent directories should always include a trailing slash, https://example.com/blog/.

Using the <base> element unnecessarily: adding a <base> element to pages that use only root-relative or absolute URLs. The <base> element provides no benefit if all URLs are already root-relative or absolute, and introduces the risk of unexpected resolution behaviour for any document-relative references that might be added later. Use the <base> element only when it solves a specific problem.

Inconsistent base URL in redirect destinations: configuring redirect destinations with inconsistent base URLs, some redirects using https://example.com and others using https://www.example.com as the destination base. Inconsistent base URLs in redirect destinations create canonicalization confusion, some redirects deliver users to the non-canonical form of the destination domain. All redirect destinations should use the canonical base URL consistently.

Not updating base URLs after domain migration: leaving <base> elements, canonical tags, and internal absolute URLs referencing the old domain base URL after a domain migration. Old domain base URLs in <base> elements cause all relative references to resolve against the old domain, potentially creating cross-domain resource loading issues and incorrect canonical declarations.