HTML: The Base Tag

0
590
HTML base tag

The <base> tag defines the base URL to be prepended for all relative URLs in a HTML document.

There can only be at most one <base> tag instance and it must belong to the <head> element. It is a good idea to place this towards the top of the <head> tag so that all tags inside <head> can use the base URL.

There are two attributes available. At least one must be used:

  1. href – The base URI itself that all relative URLs will be fully formed from
  2. target – The target that hyperlinks will reference (_top, _self, _parent, _blank)

The target attribute basically says that for all relative URLs in the document to treat the reference with any four of the types. So for example if you did this below, a new tab with a blank document will be opened in your browser if you clicked on the Toys link:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>The Base Tag</title>
  5.     <base target="_blank"/>
  6.   </head>
  7.   <body>
  8.     <main>
  9.       <p>Come see our toys! <a href="toys.html">Toys</a></p>
  10.     </main>
  11.   </body>
  12. </html>

When you use <base> with the href attribute, the user-agent will recreate URLs to be fully domain qualified URLs everywhere you have relative URLs in your documents. Using <base> as a strategy to reference known objects is a 100% commitment. If you change anything in the referencing, you may find yourself in a predicament and be forced to change all relative URLs to absolute URLs.

When you don’t use a base tag, the browser will use the leading URL up to the specific document.

If the document URL is:

http://www.site.com/cat/subcat/page.html

Then relative URLs in this document:

  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <main>
  5.       Hello!
  6.       <img src="hello.jpg"/>
  7.       <a href="home.html">Go back home</a>
  8.     </main>
  9.   </body>
  10. </html>

Will really be:

<!DOCTYPE html>
<html>
  <body>
    <main>
      Hello!
      <img src="http://www.site.com/cat/subcat/hello.jpg"/>
      <a href="http://www.site.com/cat/subcat/home.html">Go back home</a>
    </main>
  </body>
</html>

Suppose your URL structure looked originally like this and you had your <base> set to http://site.com/category/:

/
  category
    subcat1
    subcat2
    subcat3
    subcat4

Lets say now you want it to look like this:

/
  category1
    subcat1
    subcat2
  category2
    subcat3
    subcat4

You now won’t be able to use <base> for both category1 and category2 because only one instance of <base> is allowed. You will be forced to have to go through all your documents and change the relative URLs to fully qualified URLs.

The problem with using the <base> tag is that it assumes every URL object is under one base URL and you won’t change it over time.

As your website scales, you may not want to use the <base> approach. It maybe better to use mod_rewrite to change the URLs. mod_rewrite is found in many modern day HTTP servers like Apache and Nginx.

Another problem is when using fragment identifiers. Let’s assume the URL of an HTML document is:

http://www.site.com/electronics.html

And that it contains this markup:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>The Base Tag</title>
  5.     <base href="http://www.storagezoo.com/toys/"/>
  6.   </head>
  7.   <body>
  8.     <main>
  9.       <a href="#video-games">Video games</a>
  10.       <p id="video-games">
  11.         Video games!
  12.       </p>
  13.       <p id="dolls">
  14.         Dolls!
  15.       </p>
  16.       <p id="cameras">
  17.         Cameras!
  18.       </p>
  19.     </main>
  20.   </body>
  21. </html>

The absolute URL to the anchor tag link referencing the video-games fragment is an error:

http://www.site.com/toys/#video-games

Rather than the correct URL of:

http://www.site.com/electronics.html#video-games

The same problem also exists in using url parameters:

<!DOCTYPE html>
<html>
  <head>
    <title>The Base Tag</title>
    <base href="http://www.site.com/toys/"/>
  </head>
  <body>
    <main>
      <a href="?toy=video-games">Video games</a>
    </main>
  </body>
</html>

The absolute URL to the anchor tag link with the url parameter is in error:

http://www.site.com/toys/?toy=video-games

Rather than the correct URL of:

http://www.site.com/toys/electronics.html?toy=video-games

Use <base> with caution, if at all. You may just be pinning
yourself to a fixed URL scheme for which you won’t be able to have the flexibility to change later without a whole lot of work.

Example Code:

  1. <!-- Every relative URL has base prepended to it -->
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>The Base Tag | Kobashi Computing</title>
  6.     <base href="http://www.site.com/resources/"/>
  7.  
  8.     <!-- http://www.site.com/resources/css/styles.css -->
  9.     <link rel="stylesheet" href="css/styles.css"/>
  10.  
  11.     <!-- http://www.site.com/resources/js/script.js -->
  12.     <script src="js/script.js"></script>
  13.   </head>
  14.   <body>
  15.     <main>
  16.       <!-- http://www.site.com/resources/images/logo.jpg -->
  17.       <img src="images/logo.jpg"/>
  18.       <menu>
  19.         <!-- http://www.site.com/resources/home.html -->
  20.         <menuitem><a href="home.html">Home</a></menuitem>
  21.  
  22.         <!-- http://www.site.com/resources/products.html -->
  23.         <menuitem><a href="products.html">Products</a></menuitem>
  24.  
  25.          <!-- http://www.site.com/resources/about.html -->
  26.         <menuitem><a href="about.html">About</a></menuitem>
  27.       </menu>
  28.     </main>
  29.   </body>
  30. </html>

Of Interest