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.
Table of Content
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.htmlBut 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.jsAnchor links use the base too:
<a href="section2.html#contact">Contact</a>This resolves as:
https://example.com/assets/section2.html#contactExamples 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.htmlThe 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.jsCombine 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.htmlThe 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
hrefattribute to control relative paths - Set the
targetattribute to define link behavior - The browser uses only the first tag
FAQs
What does the <base> tag do in HTML?
Can I use more than one tag in a document?
Where should I put the <base> tag?
Does the <base> tag affect absolute URLs?
Can I use both href and target in the <base> tag?
Similar Reads
Paragraphs help group-related text. They build clear, readable pages. You use them to split ideas or topics. The HTML p…
The HTML canvas tag draws shapes and images. It also helps you draw text with code. It gives control over…
The HTML button tag creates interactive controls on a web page. You can use this element to trigger actions or…
The track tag in HTML adds text tracks like subtitles and captions to media. It improves video access and helps…
The source tag in HTML helps load different media formats and screen sizes. You can use it inside many other…
The abbr tag refers to an abbreviation in HTML. It helps you save space and improve accessibility. The screen readers…
Comments in HTML help you explain your code. You can add notes without showing anything in the browser. Understand How…
The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common…
The HTML figure tag links media with a caption. Use it to group an image, diagram, code block, or video…
HTML has three main list tags: <ul>, <ol>, and <dl>. Each one shows a different kind of group. In this…
