HTML base Tag: How to Set a Base URL for Links and Resources

Use the <base> tag in HTML to set a single base URL or target for all relative links and resources in the page. This tag removes the need to repeat full or partial paths throughout the document.

Understand the <base> Tag in HTML

The tag sets a base URL for all relative URLs in a page. It changes how the browser resolves links and resources.

Here is the tag:

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

This tag does not wrap content. It has no closing tag. You place it inside the element only.

The tag defines a root URL for all links, images, scripts, and other resources in the document. It avoids long, repeated paths.

All relative URLs in the HTML now use the base URL. The browser appends the relative path to the base.

Here are the use cases:

• If you move files between folders.
• When you load HTML from an external source.
• Use it when you want to set a common target for all links.

Place it inside the tag. Put it before any link, script, or style that uses relative paths. The browser reads only the first tag. Ignore any other tags after it.

Attributes of the <base> Tag in HTML

href: Base URL for Links:

Set the main URL for all relative paths. The browser uses this as a prefix.

<base href="https://cdn.example.com/assets/">

This changes the path of all relative links and resources.

target: Default Target for Links:

Set a default link target. It works like the tag’s target.

<base target="_blank">

This opens all links in a new tab unless another link overrides it.

How the <base> Tag Affects URLs

Relative vs Absolute URLs:

Take this example:

<base href="https://example.com/pages/">
<a href="about.html">About</a>

The link goes to:

https://example.com/pages/about.html

But if you write an absolute URL, the base has no effect:

<a href="https://other.com/home.html">Home</a>

Image Paths, Scripts, and Anchor Links:

The tag affects all resources with relative paths.

<base href="https://example.com/assets/">
<img src="img/logo.png">
<script src="js/app.js"></script>

The browser loads:

https://example.com/assets/img/logo.png
https://example.com/assets/js/app.js

Anchor links use the base too:

<a href="section2.html#contact">Contact</a>

This resolves as:

https://example.com/assets/section2.html#contact

Examples of the <base> Tag in HTML

Set Base URL for Internal Links:

<head>
  <base href="https://site.com/docs/">
</head>
<body>
  <a href="chapter1.html">Start</a>
</body>

This link points to:

https://site.com/docs/chapter1.html

The browser uses the base to resolve the relative path.

Set a Target for All Links:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://external.com">Visit</a>
</body>

The browser opens this link in a new tab. You avoid setting target for each link.

Use Base for Scripts and Styles:

<head>
  <base href="https://cdn.site.net/ui/">
  <link href="styles/main.css" rel="stylesheet">
  <script src="scripts/init.js"></script>
</head>

The browser loads from:

https://cdn.site.net/ui/styles/main.css
https://cdn.site.net/ui/scripts/init.js

Combine href and target:

<head>
  <base href="https://blog.example.com/posts/" target="_self">
</head>
<body>
  <a href="article.html">Read</a>
</body>

The link points to:

https://blog.example.com/posts/article.html

The browser loads it in the same tab.

Wrapping Up

In this article, you learned how the tag sets a root URL. You also learned how it changes relative paths and link behavior.

Here is a quick recap:

• Use in the
• Set the href attribute to control relative paths
• Set the target attribute to define link behavior
• The browser uses only the first tag

FAQs

Similar Reads