HTML <base> Tag – Base URL for Links
📌 Introduction
The <base> tag defines a base URL for all relative links in a web page.
It tells the browser:
“Use this URL as the starting point for all links and resources.”
👉 It must be placed inside the <head> section.
🧱 Syntax
<head>
<base href="https://example.com/" />
</head>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Base Example</title>
<base href="https://example.com/" />
</head>
<body>
<a href="page.html">Go to Page</a>
</body>
</html>
🖥️ Output Explanation
- The link becomes:
https://example.com/page.html
- Even though you wrote only
page.html
🎯 Why <base> is Important
1. 🌐 Controls All Relative Links
Applies to:
<a>links<img>sources<script>files<link>CSS files
2. ⚙️ Simplifies Projects
Instead of repeating full URLs everywhere.
3. 📦 Useful in Large Websites
Helps manage paths easily.
🧩 Example with Images and Links
<head>
<base href="https://mysite.com/" />
</head>
<body>
<a href="about.html">About</a>
<img src="images/logo.png" />
</body>
🧠 Important Concept
👉 <base> affects ALL relative paths
| Element | Effect |
|---|---|
<a> |
Link URL changes |
<img> |
Image path changes |
<script> |
JS file path changes |
⚠️ Important Notes
- Only ONE
<base>per page ❌ (multiple is invalid) - Must be inside
<head> - Affects entire document
🚫 Common Mistakes
- Putting
<base>in<body>❌ - Using multiple
<base>tags ❌ - Forgetting it changes ALL relative links ❌
🧪 Mini Exercise
Create a page with:
- A
<base>URL set to a website - A relative link (
<a href="page.html">) - An image with relative path
- Check how URLs change