Berlin +49 30 120 856 32 mail@dlx-media.com
Contact
HTML Base Tag

HTML Base Tag

The HTML Base Tag defines a base URL for relative links and influences the default behavior of all references on a webpage.

What is the HTML Base Tag?

The base tag (written as <base>) is an HTML element placed in the <head> section of a webpage. It defines a base URL that serves as the starting point for all relative links and paths on the page. Additionally, it allows you to set a default behavior for links, such as whether they should open in a new tab.

How Does the Base Tag Work?

A typical example looks like this:

<head>
  <base href="https://www.examplepage.com/" target="_blank">
</head>

In this case, all relative links on the page are automatically resolved relative to the specified base URL. A link like <a href="contact.html">Contact</a> will be interpreted by the browser as https://www.examplepage.com/contact.html. The target="_blank" attribute ensures that all links open in a new tab, unless a different behavior is specified for individual links.

What Is the Base Tag Used For?

  • Consistent Linking: Useful when a webpage contains many relative links that should all reference a specific URL.
  • Default Link Behavior: The target attribute allows you to set a uniform default for all links without specifying it for each link individually.
  • Protection Against Content Theft: If a page, including its HTML code, is copied and used on a different domain, all relative links and resources will continue to point to the original server. Images and stylesheets will still be loaded from the original source, making theft detectable and more difficult.
  • Single-Page Applications (SPA): In modern JavaScript frameworks like React, Vue, or Angular, the base tag is often used to correctly set the base URL for internal routing.

Best Practices for the Base Tag

  • Only One Base Tag per Page: Only a single base tag may be used per HTML document. Multiple tags will be ignored by the browser or may lead to unexpected behavior.
  • Use Absolute URLs: The base URL should always be a complete absolute address (e.g., https://www.domain.com/), not a relative path. This avoids errors in resolution.
  • Place Early in the <head>: The base tag should be placed as high as possible in the <head> to ensure that all subsequent references to stylesheets, scripts, and images are processed correctly.
  • Check the Impact: Since the base tag changes the behavior of all relative URLs, you should verify that existing links and resources continue to function correctly before using it.

When Is the Base Tag Less Useful?

In many modern web projects, the base tag is deliberately avoided. Content Management Systems like WordPress, Joomla, or Typo3 typically generate internal links as absolute URLs automatically. If you work exclusively with absolute links, the base tag is usually unnecessary. If it is still used, conflicts may arise with plugins, anchor links (such as #section), or JavaScript functions that rely on relative URLs.

Conclusion

The base tag is a small but powerful HTML element that is useful in specific scenarios, such as Single-Page Applications, complex directory structures, or as an additional safeguard against unauthorized copies of a webpage. For classic WordPress sites and common web projects using absolute links, it is rarely needed. If you decide to use it, keep an eye on its impact on all internal references and test thoroughly beforehand.

Back to glossary