HtmlConceptBeginner · 3 min read

What is Base Tag in HTML: Definition and Usage

The <base> tag in HTML sets a base URL for all relative links and resources on a webpage. It tells the browser where to start looking for files when a relative path is used, making link management easier.

⚙️

How It Works

The <base> tag works like a starting point or home address for all relative URLs on a webpage. Imagine you have a map with directions, but instead of giving full addresses every time, you say "start from this place." The <base> tag sets that "place" for the browser.

When the browser sees a relative link like images/photo.jpg, it combines it with the base URL to find the full path. Without a base tag, the browser uses the page's own URL as the starting point. With a base tag, you can change that starting point to anywhere you want.

💻

Example

This example shows how the <base> tag changes where relative links point to.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Base Tag Example</title>
  <base href="https://example.com/assets/">
</head>
<body>
  <h1>Base Tag Demo</h1>
  <a href="images/photo.jpg">Photo Link</a>
  <img src="images/photo.jpg" alt="Photo">
</body>
</html>

Output

A page titled 'Base Tag Example' with a heading 'Base Tag Demo', a clickable link labeled 'Photo Link', and an image below it. Both link and image load from https://example.com/assets/images/photo.jpg.

🎯

When to Use

Use the <base> tag when you want all relative links and resources on your page to start from a specific URL. This is helpful if your files are stored in a different folder or server than your HTML page.

For example, if your website's images and styles are hosted on a content delivery network (CDN), you can set the base URL to that CDN. This way, you don't have to write the full URL for every image or stylesheet.

It also helps when moving pages between folders or servers, so you only update the base tag instead of every link.

✅

Key Points

The <base> tag must be inside the <head> section.
Only one <base> tag is allowed per page.
It affects all relative URLs for links, images, scripts, and stylesheets.
If no <base> tag is set, the browser uses the page's URL as the base.

✅

Key Takeaways

The tag sets a starting URL for all relative links on a page.

Place the tag inside the section and use only one per page.

It simplifies managing links when resources are stored in a different location.

Without a base tag, relative URLs use the page's own URL as the base.