👀 Live Preview
Conceptual view of how <base> affects a relative link:
<base href="https://example.com/">href="about.html" https://example.com/about.htmlHTML <base> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll know when and how to set a document-wide base URL for relative links and resources.
Core Purpose
Set the default URL foundation for every relative path in a document.
Head Placement
Place exactly one <base> inside <head>.
href & target
Resolve URLs with href and set default link targets.
URL Resolution
Understand how relative, root-relative, and absolute paths behave.
Security
Avoid injected base URLs that redirect users to malicious sites.
When to Skip It
Prefer root-relative paths on most modern production sites.
Fundamentals
What Is the <base> Tag?
The base element (<base>) specifies a document-wide base URL. Any relative URL in the page is resolved against this foundation instead of the current page URL.
One per document, head only
The base element is a void metadata tag that must live in <head>. Only one is allowed per HTML document, and it should appear before relative URLs that depend on it.
It affects links, images, stylesheets, scripts, forms, and any other attribute that uses a relative URL. Absolute URLs with a full scheme are not changed.
Foundation
📝 Syntax
Place <base> inside <head> with an href attribute pointing to the base URL. End with a trailing slash when resolving path segments:
syntax.html
<head>
<base href="https://example.com/">
<!-- Other head elements -->
</head><base>is a void element—no closing tag required in HTML5.- Use a complete URL with trailing slash when resolving nested path segments.
- Place it before any relative
hreforsrcthat should use the base URL.
Cheat Sheet
⚡ Quick Reference
| Attribute / Rule | Values | Purpose |
|---|---|---|
href | URL | Base URL for resolving relative paths |
target | _blank | _self | … | Default browsing context for links and forms |
| Placement | <head> | Must appear in the document head |
| Limit | One per page | Only a single base element is allowed |
| Absolute URLs | Unchanged | Full URLs with scheme are not affected |
| Alternative | /root-relative | Most sites use paths like /css/style.css instead |
Resolution
🔗 How Relative URL Resolution Works
With <base href="https://example.com/docs/">, the browser resolves relative paths like this:
| Input | Type | Resolved URL |
|---|---|---|
page.html | Relative path | https://example.com/docs/page.html |
images/logo.png | Subfolder | https://example.com/docs/images/logo.png |
/about.html | Root-relative | https://example.com/about.html (host only) |
https://other.com/ | Absolute | Unchanged — base does not apply |
Reference
🧰 Attributes
The <base> tag supports two meaningful attributes plus global attributes:
href Required*The document base URL used to resolve relative URLs in links, images, CSS, scripts, and forms.
href="https://example.com/"target OptionalDefault browsing context for links and forms: _blank, _self, _parent, or _top.
target="_blank" base.html
<base href="https://example.com/" target="_blank">* At least one of href or target must be present for the element to have effect.
Hands-On
Examples Gallery
Three base URL patterns with copy-ready code, live previews, and hands-on practice.
Basic Base URL
Set the foundation URL inside <head> so all relative paths resolve from one location.
basic-base.html
<head>
<base href="https://example.com/">
</head>
<body>
<a href="index.html">Home</a>
</body>📚 Common Use Cases
Here are the most frequent scenarios where the <base> tag is used.
Resolving Relative Resources
Point all relative stylesheet, image, and link paths at a CDN or site root without rewriting every URL.
resolving-relative-urls.html
<head>
<base href="https://codetofun.com/">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="images/logo.png" alt="Logo">
<a href="page.html">Visit Page</a>
</body>Default Link Target
Use the target attribute to open all links and form submissions in a specific browsing context by default. Individual links can still override with their own target.
base-target.html
<head>
<base href="https://example.com/" target="_blank">
</head>
<body>
<a href="docs.html">Opens in new tab</a>
<a href="help.html" target="_self">Opens in same tab</a>
</body>Security
🔒 Security Considerations
Because <base> redirects every relative URL on the page, a compromised or injected base element can send users to malicious destinations. Treat it carefully:
- Never allow user-generated content to insert a
<base>tag - Use Content Security Policy where possible to limit unexpected base URLs
- Prefer explicit absolute or root-relative paths on security-sensitive pages
🧠 How <base> Works
1
Author sets base in head
Add <base href="..."> before relative URLs that depend on it.
Markup
2
Browser parses the document
The base URL is stored as the document’s URL resolution context.
Parsing
3
Relative URLs are resolved
Each relative href or src is combined with the base URL to form a full address.
Resolution
=
Consistent resource loading
Short relative paths work across mirrored or exported pages without rewriting every URL by hand.
Compatibility
Universal Browser Support
The <base> tag is supported in all browsers, including Internet Explorer.
Baseline · Since HTML
Document URL resolution everywhere
From legacy IE to the latest browsers — the base element has universal support for href and target resolution.
100% Universal support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer All versions · Legacy environments
Full supportOpera All modern versions
Full support<base> tag 100% supported
Bottom line: Ship base URL markup with confidence. The <base> element works in every production browser today.
Wrap Up
Conclusion
The <base> tag establishes a document-wide URL foundation for resolving relative links and resources. Use it deliberately in the <head>, limit yourself to one per page, and prefer root-relative paths on most modern sites.
When you do need it, pair href with optional target and keep security in mind.
Pro Tips
💡 Best Practices
✅ Do
- Place
<base>inside<head>before dependent URLs - Use a complete URL with trailing slash when resolving path segments
- Use
targetwhen every link should open the same way - Prefer root-relative paths (
/css/style.css) on most sites
❌ Don’t
- Add more than one
<base>element per document - Put
<base>in the body—it belongs in the head - Allow untrusted content to inject a base URL
- Assume
<base>improves SEO—it only affects URL resolution
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <base>
Bookmark these before you ship — they’ll keep your relative URLs resolving correctly and safely.
6
Core concepts 01
Default Base URL
<base> sets the foundation for resolving every relative path in the document.
02
Head Only
Must live in <head>—only one base element per HTML document.
03
href Resolution
href resolves links, images, CSS, scripts, and form actions.
04
Default Target
target sets the default browsing context for all links and forms.
05
Absolute Unchanged
Fully qualified URLs with a scheme are not modified by the base element.
Resolution 06
Universal Support
Supported in every browser including Internet Explorer—no polyfills needed.
Compatibility❓ Frequently Asked Questions
The
<base> element sets a default base URL for resolving relative links and resources in a document—including anchors, images, stylesheets, and scripts.Inside
<head>, before any relative URLs that should use it. Only one <base> element is allowed per HTML document.href sets the base URL. target sets the default browsing context for links and forms, such as _blank for new tabs.No. Fully qualified URLs with a scheme (like
https://example.com/page.html) are unchanged. Only relative URLs are resolved against the base.Usually no. Most modern sites use root-relative paths like
/css/style.css. Use <base> sparingly for mirrored content, static exports, or legacy templates.Try Base URL Resolution
Open the Try It editor and see how relative links resolve against a base href.
About the author
7 people found this page helpful