Path // www.yourhtmlsource.com → Reference → <base>

<base>

by Ross Shannon

The <base> element specifies the base URL for all relative URLs in a document. It can also set the default target for all hyperlinks. This is a void element (self-closing) that must appear in the <head> section, and there can only be one <base> element per document.

Clock This page was last updated on 2025-11-27


Syntax

<base href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.example.com%2F&mode=full">

or

<base href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.example.com%2F&mode=full" target="_blank">

Attributes

  • href - Specifies the base URL for all relative URLs in the document. Must be an absolute URL.
  • target - Specifies the default target for all hyperlinks and forms. Common values:
    • _self - Opens in the same frame (default)
    • _blank - Opens in a new window or tab
    • _parent - Opens in the parent frame
    • _top - Opens in the full body of the window

Examples

Setting a base URL:

<head>
  <base href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.example.com%2Fimages%2F&mode=full">
  <title>My Page</title>
</head>
<body>
  <!-- This image loads from https://www.example.com/images/logo.png -->
  <img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fwww.yourhtmlsource.com%2Freference%2Flogo.png&mode=full" alt="Logo">
</body>

Opening all links in new tabs:

<head>
  <base target="_blank">
  <title>External Links Page</title>
</head>
<body>
  <!-- All these links open in new tabs -->
  <a href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fgoogle.com%2F&mode=full">Google</a>
  <a href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fgithub.com%2F&mode=full">GitHub</a>
</body>

Combined href and target:

<head>
  <base href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fcdn.example.com%2Fassets%2F&mode=full" target="_self">
  <title>Asset Page</title>
</head>

When to Use

The <base> element is useful in specific situations:

  • CDN resources - When most assets come from a content delivery network
  • Subdirectory sites - When your site lives in a subdirectory but URLs need to be relative to a different location
  • Link aggregator pages - When you want all links to open in new tabs by default
  • Single-page applications - When using client-side routing with history API

Important considerations:

  • Place the <base> element before any elements that use URLs (including <link> and <script>)
  • Multiple <base> elements are technically allowed, but only the first one with an href attribute and the first one with a target attribute are used - subsequent ones are ignored
  • Fragment identifiers (anchors like #section) resolve against the current document URL, not the base URL
  • The base URL affects ALL relative URLs, including CSS, JavaScript, and image paths
  • Use with caution as it can cause unexpected behavior if not carefully managed
  • Individual elements can override the default target with their own target attribute

When to avoid:

  • Simple websites where relative URLs work fine without it
  • When you need different base URLs for different resources
  • When it might confuse other developers working on the project
  • <head> - The container where <base> must be placed
  • <link> - URLs in link elements are affected by base
  • <script> - Script src attributes are affected by base