HTML <base> Tag

The HTML <base> tag is a powerful yet often overlooked element that defines the base URL for all relative URLs in a document. By specifying a base URL, all hyperlinks, image paths, and other resource links will be resolved relative to the base, simplifying the management of large websites with multiple pages. The <base> tag must be placed inside the <head> section of the HTML document and affects all the relative URLs on that page.

The <base> tag is especially useful when linking external resources or ensuring that internal links work correctly, regardless of the page location within the site's structure.

Syntax of the <base> Tag

The <base> tag has a straightforward syntax, allowing you to define either the base URL for all links or the default target window for all links.

html
<base href="URL" target="window">
  • href: Specifies the base URL to be used for all relative URLs on the page.
  • target: Defines the default target window or frame for hyperlinks. Common values include _self, _blank, _parent, and _top.

The <base> tag should always be placed in the document’s <head> section, and only one <base> tag is allowed per HTML document.

Attributes of the <base> Tag

The <base> tag supports two main attributes:

AttributeDescription
hrefDefines the base URL for all relative URLs on the page.
targetSpecifies the default target window or frame for hyperlinks (_self, _blank, _parent, _top).

Both of these attributes are optional but can drastically simplify the process of managing hyperlinks, images, and other resources across large web applications.

Examples of HTML <base> Tag

Example 1: Setting the Base URL for Relative Links

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base URL Example</title>
    <base href="https://www.example.com/">
</head>
<body>
    <a href="about.html">About Us</a>
    <a href="contact.html">Contact Us</a>
</body>
</html>

In this example, the <base href> attribute is set to "https://www.example.com/". Therefore, all relative links (such as "about.html" and "contact.html") will resolve to "https://www.example.com/about.html" and "https://www.example.com/contact.html", respectively.

Example 2: Setting the Default Target for Hyperlinks

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base Target Example</title>
    <base target="_blank">
</head>
<body>
    <a href="https://www.example.com">Visit Example</a>
    <a href="https://www.google.com">Visit Google</a>
</body>
</html>

In this example, the <base> tag defines the default target as _blank, meaning all links will open in a new tab or window.

FAQs About the HTML <base> Tag

Q1: What is the purpose of the HTML <base> tag?
A: The <base> tag specifies the base URL for all relative URLs in a document, making it easier to manage resources and links. It can also set a default target window for hyperlinks.

Q2: Can multiple <base> tags be used in a single HTML document?
A: No, only one <base> tag is allowed per HTML document. If multiple are present, only the first <base> tag will be recognized.

Q3: Is the <base> tag necessary for absolute URLs?
A: No, the <base> tag is not required for absolute URLs, as they already define the full path. The <base> tag is useful for resolving relative URLs.

Q4: What happens if the <base> tag is placed outside the <head> section?
A: The <base> tag will not function if placed outside the <head> section. It must be inside the <head> section to be effective.

Q5: Can the <base> tag improve SEO?
A: Indirectly, yes. By ensuring that all relative URLs resolve correctly, the <base> tag helps prevent broken links, which can improve the user experience and SEO.

tools

HTML

Related Articles