What is Base Tag?
The <base> tag sets a "default address" for all relative links on your page.
How it works:
1<head>
2 <base href="https://www.example.com/images/" target="_blank">
3</head>
4<body>
5 <!-- This link goes to: https://www.example.com/images/logo.png -->
6 <img src="logo.png" alt="Logo">
7
8 <!-- This link goes to: https://www.example.com/images/banner.jpg -->
9 <img src="banner.jpg" alt="Banner">
10
11 <!-- This link opens in new tab (because of target="_blank") -->
12 <a href="about.html">About</a>
13</body>Base tag attributes:
Attribute | What it does |
|---|---|
| Default URL for all relative links |
| Default target for all links ( |
Important warnings:
Only ONE base tag per page (if you put multiple, only first works)
Must be in
<head>(before any links)Affects ALL relative links (including images, CSS, JS)
Absolute links (https://...) are NOT affected
Example with multiple links:
1<head>
2 <base href="https://mysite.com/products/" target="_blank">
3</head>
4<body>
5 <!-- Goes to: https://mysite.com/products/laptops -->
6 <a href="laptops">Laptops</a>
7
8 <!-- Goes to: https://mysite.com/products/phones -->
9 <a href="phones">Phones</a>
10
11 <!-- This is absolute, so base tag does NOT affect -->
12 <a href="https://google.com">Google</a>
13
14 <!-- Still opens in new tab because of base target="_blank" -->
15 <a href="about.html">About</a>
16</body>When to use Base tag:
When moving a site to a new folder
When all links should open in new tabs
When you have many relative links
When NOT to use Base tag:
On most websites (it can be confusing)
When you need different targets for different links