<base>

Specifies the base URL and/or target for all relative URLs in a document

Standard HTML

Definition and Usage

The <base> element specifies the base URL and/or default target for all relative URLs in a document. This can be useful when all links in a document should open in the same window, or when the document is located at a different path than its resources.

There can be a maximum of one <base> element in a document, and it must be inside the <head> element.

Important: The <base> tag must be placed before any other elements that use URLs, such as <link>, <script>, or <img>.

Warning: Using the <base> tag can have unexpected side effects on anchor links and form submissions. Use with caution.

Browser Support

The <base> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

Attribute	Value	Description
href	URL	Specifies the base URL for all relative URLs in the page
target	_blank _self _parent _top framename	Specifies the default target for all hyperlinks and forms in the page

Target Values

Value	Description
_blank	Opens the link in a new window or tab
_self	Opens the link in the same frame/window (default)
_parent	Opens the link in the parent frame
_top	Opens the link in the full body of the window
framename	Opens the link in a named iframe

Examples

Setting Base URL

Define a base URL for all relative links:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://www.example.com/">
</head>
<body>
  <!-- This links to https://www.example.com/images/logo.png -->
  <img src="images/logo.png" alt="Logo">

  <!-- This links to https://www.example.com/about.html -->
  <a href="about.html">About Us</a>
</body>
</html>

Setting Default Target

Make all links open in a new window:

Example
<!DOCTYPE html>
<html>
<head>
  <base target="_blank">
</head>
<body>
  <!-- All these links will open in a new tab -->
  <a href="page1.html">Page 1</a>
  <a href="page2.html">Page 2</a>
  <a href="page3.html">Page 3</a>
</body>
</html>

Both href and target

Combine base URL and default target:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://www.example.com/" target="_blank">
</head>
<body>
  <!-- Links to https://www.example.com/products.html in new tab -->
  <a href="products.html">Our Products</a>

  <!-- Links to https://www.example.com/contact.html in new tab -->
  <a href="contact.html">Contact Us</a>
</body>
</html>

Overriding Base Target

Individual links can override the base target:

Example
<!DOCTYPE html>
<html>
<head>
  <base target="_blank">
</head>
<body>
  <!-- Opens in new tab (uses base target) -->
  <a href="external.html">External Page</a>

  <!-- Opens in same window (overrides base target) -->
  <a href="internal.html" target="_self">Internal Page</a>
</body>
</html>

Base URL for Resources

Using base URL for stylesheets and scripts:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://cdn.example.com/assets/">

  <!-- Loads from https://cdn.example.com/assets/css/style.css -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Loads from https://cdn.example.com/assets/js/main.js -->
  <script src="js/main.js"></script>
</head>
<body>
  <!-- Content here -->
</body>
</html>

Base with Absolute URLs

Absolute URLs are not affected by base tag:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://www.example.com/">
</head>
<body>
  <!-- Uses base URL: https://www.example.com/page.html -->
  <a href="page.html">Relative Link</a>

  <!-- Ignores base URL: https://www.other-site.com/page.html -->
  <a href="https://www.other-site.com/page.html">Absolute Link</a>
</body>
</html>

Base with Fragment Identifiers

How base URL affects anchor links:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://www.example.com/docs/">
</head>
<body>
  <!-- Links to https://www.example.com/docs/#section1 -->
  <a href="#section1">Section 1</a>

  <h2 id="section1">Section 1</h2>
  <p>Content here...</p>
</body>
</html>

Base with Forms

Base URL affects form submission:

Example
<!DOCTYPE html>
<html>
<head>
  <base href="https://api.example.com/">
</head>
<body>
  <!-- Submits to https://api.example.com/submit -->
  <form action="submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Try it Yourself

Interactive Example

Understanding how base URL works:

Base URL: https://www.example.com/docs/

Relative: guide.html

Resolves to: https://www.example.com/docs/guide.html

Relative: ../images/logo.png

Resolves to: https://www.example.com/images/logo.png

Try in Code Playground

Best Practices

Use sparingly: The <base> tag can cause confusion and unexpected behavior. Consider using absolute URLs instead
Place early: Always place the <base> tag before other elements that reference URLs
One per document: Use only one <base> tag per document. Multiple tags may cause unpredictable behavior
Watch anchor links: Be careful with fragment identifiers (#section) as they will be resolved against the base URL
Test thoroughly: Test all links and resources when using a base URL, especially during development
Document usage: If you use <base>, document it clearly for other developers
Consider alternatives: For CDN resources, consider using full URLs instead of relying on base
Trailing slash matters: Always include a trailing slash in href if it's a directory path

Common Pitfalls

Anchor Links Breaking

Fragment identifiers (#section) in the same page may not work as expected:

<!-- This may not work as intended -->
<head>
  <base href="https://example.com/page.html">
</head>
<body>
  <a href="#section1">Go to Section 1</a>
  <!-- Browser tries to go to https://example.com/page.html#section1 -->
</body>

Form Action Issues

Forms with relative actions will be affected by the base URL, which may cause forms to submit to wrong locations during development.

JavaScript Location

JavaScript code using window.location or document.location may behave unexpectedly with a base tag.

When to Use <base>

The <base> tag is most useful in these scenarios:

Documents with many relative URLs that should all resolve to the same base location
Setting a default target for all links (e.g., opening all links in a new window)
Loading all resources from a CDN without modifying individual URLs
Documentation or help systems with consistent URL structure
Email templates where the base URL may vary depending on deployment

Related Tags

<head>
Defines document head section
<a>
Defines hyperlinks
<link>
Links external resources
<meta>
Defines metadata