🚀 Your All-in-One Toolbox — 90+ Free Online Tools
Logo

HTML base Tag

The HTML `<base>` tag specifies the base URL to use for all relative URLs contained within a document. It is an empty element and must be placed within the `<head>` section of an HTML document. There can be only one `<base>` element in a document.

Basic Syntax

html
<head>
  <base href="https://www.example.com/assets/" target="_blank">
  <title>My Document</title>
</head>
<body>
  <img src="images/photo.jpg" alt="A photo">
  <a href="pages/about.html">About Us</a>
</body>
In the example above: - The <img> source images/photo.jpg will resolve to https://www.example.com/assets/images/photo.jpg. - The <a> link pages/about.html will resolve to https://www.example.com/assets/pages/about.html and will open in a new tab due to target="_blank".

Key Attributes

- href: Specifies the base URL for all relative URLs in the page. If this attribute is specified, the <base> element must come before any other elements in the document that have URL values (e.g., before <link href="..."> or <script src="...">).

- target: Specifies the default target for all hyperlinks and forms in the page that do not have their own target attribute. Common values include:

- _self: (Default) Opens the linked document in the same frame as it was clicked.

- _blank: Opens the linked document in a new window or tab.

- _parent: Opens the linked document in the parent frame.

- _top: Opens the linked document in the full body of the window.

Important Considerations

- Placement: Must be in the <head> and preferably as one of the first elements, especially before any elements that reference external resources.

- Uniqueness: Only one <base> element is allowed per document.

- Absolute URLs: The <base> tag does not affect absolute URLs.

- Impact on Page-Relative Anchors: Be mindful of how <base href="..."> affects simple anchor links like <a href="#top">. They will no longer be relative to the current page but to the base URL.

- Use with Caution: While <base> can be convenient, it can also make URLs less intuitive to understand and maintain if not used carefully, especially in complex sites or when content is moved around. Many developers prefer to use root-relative paths (e.g., /images/pic.jpg) or full URLs instead of relying on <base>.

When is it Useful?

- When a site's assets (images, scripts, styles) are all located in a consistent subdirectory relative to a base path. - When migrating a site to a new directory structure or domain, as it can help update links without changing every single URL in the content (though server-side redirects are often a better solution for permanent moves). - Setting a default target for all links on a page, for example, if all external links should open in a new tab.

Conclusion

The <base> tag provides a way to define a document-wide base URL and default link target. While it can simplify URL management in certain scenarios, it also introduces complexities, particularly with same-page anchor links. Weigh its benefits against potential confusion before implementing it.
Back