HTML Base Tag

The <base> tag is used to set a default base URL or target for all the relative links and resources on a web page. This tag is placed inside the <head> section of an HTML document and helps the browser understand where all the links or referenced files should point to.

Why Use the <base> Tag?
  1. It helps you avoid repeating full URLs in every link or image.
  2. If the structure or domain of your website changes, you only need to update the base once instead of editing every individual path.
Note! Do not code the <base> tag in between the <head> as the elements may not consider the URL provided in <base> tag.
The best practice is, always code <base> tag at the beginning of the <head> tag.
Syntax -
<base href="URL" target="value">
AttributeDescription
hrefsets the base URL for all relative links on the page.
targetsets the default target for where the linked page should open (e.g., same tab or new tab).
Example -

Scenario - Example Using <basefont> Tag

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Base tag example</title>
		<base href="https://www.tutorialscampus.com">
	</head>
	<body>
		<img src="img/logos/header1.webp" alt="Logo" 
			height="150" width="150">
	</body>
</html>
Output -
Logo
Explaining Example -

With this, the links will:

  • Use https://www.tutorialscampus.com/ as their starting point.
  • So the browser will look for:
    • img/logos/header1.webphttps://www.tutorialscampus.com/img/logos/header1.webp

Even though the actual HTML file might be deeper in a subfolder, the browser uses the base URL you define.