What Are the Recommendations For HTML ≪Base≫ Tag

What are the recommendations for html base tag?

Breakdown of the effects of the base tag:

The base tag appears to have some non-intuitive effects, and I recommend being aware of the outcomes and testing them for yourself before relying on <base>! Since I've discovered them after trying to use the base tag to handle local sites with differing urls and only found out the problematic effects after, to my dismay, I feel compelled to create this summary of these potential pitfalls for others.

I'll use a base tag of: <base href="http://www.example.com/other-subdirectory/"> as my example in the cases below, and will pretend that the page that the code is on is http://localsite.com/original-subdirectory

Major:

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit:
The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

• <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
  
  becomes
  
  <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

• <a href='?update=1' title='Some title'>A link to this page</a>
  
  becomes
  
  <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Minor:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]--> as BalusC mentions in his answer above.

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

Related links of testing for issues when using "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results

Edit by Izzy: For all of you running into the same confusion as me concerning the comments:

I've just tested it out myself, with the following results:

• trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified <BASE>).
• It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

So for relative links, BASE works fine with the moved page – while anchors and ?queries would need the file name be specified explicitly (with BASE having a trailing slash, or the last element not corresponding to the name of the file it's used in).

Think of it as <BASE> replacing the full URL to the file itself (and not the directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html (after it moved to the new location), the correct specification should have been:

<base href="http://www.example.com/other-subdirectory/test.html">

– et voila, everything works as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.

Is the HTML base tag also honored by scripting and CSS?

CSS paths are always relative to the stylesheet itself and have no dependence on the HTML location (except when IE6 is buggy and stupid and tries to load .htc files specified in CSS behavior attributes relative to the document). For other stuff, <base> will affect the perceived current directory of the HTML as if the file was located in the directory defined by base. Consequently, it does affect things like location.href=...;. By the way, inline styles and style information in <style> element are loaded relative to the document location. Those are affected by the <base> tag, of course.

why using main tag in html is considered good practice?

Using HTML-5 tags is considered best practice because one simple reason:

The browser knows what your element means. Because of that your SEO (Search engine optimalization) score gets better the more you use HTML-5 elements. One short example:

In this case the browser does not recognize the div is an header:

<div class='header'></div>

In this case the browser does recognize this is an header:

<header class='main_header'></header>

Because of this it is recommended to use HTML-5 tags.

More information about HTML-5 tags can be found here: https://www.w3schools.com/html/

More information about SEO can be found here: https://www.quanzhanketang.com/website/web_search.html

What is the base element in HTML for?

You normally don’t need the base element. It is sometimes used when most URLs on a page refer to a site other than the site of the page; in that case, <base href="..."> lets you use relative URLs for those; but then all other URLs must be absolute. In the past, <base target=...> was sometimes used on frameset pages in order to make link open in a particular frame.

Is there an HTML attribute dedicated to setting the base URL for all descendants of an element?

From a comment by Alohci:

It was indeed proposed a long time ago. At least once, in May 2007. And the xml:base attribute dates back at least as far as 1999. - Alohci, Oct 29, 2021 at 13:02

How to use base tag in html5 for specific anchor tags only

If you want this for a specific anchor tag only it is not possible, you can use as a workaround for that such as giving the specific anchors a class and creating a javascript function that loops through these anchors on document load, update their href attributes and prepend the base URL specifcally.

Using the HTML tag applies to all the website not to specific anchors:

The base tag provides base location from which links on a page should be made. Relative links within a document (such as <a href="someplace.html"… or <img src="someimage.jpg"… ) will become relative to the URL specified by the base element.

UPDATE

Below is a non-tested example, knowing that the base tag shall be removed:

    var specificBaseURL = 'http://www.example.com/';

    $(document).ready(function(){

        $(".specific_anchor").each(function(){

          $(this).attr("href", specificBaseURL + $(this).attr("href"));

        }); 
    });

HTML:

 <a class="specific_anchor" href="path1/">...</a>
   <a href="non/specific/path2">...</a>
   <a class="specific_anchor" href="path3/">...</a>

Is base tag really necessary for relative URLs?

If you don't have a <base> element, the browser will use the current address to resolve relative URIs.

If you do supply a <base> element, you basically tell the browser to use the uri you supplied instead of the browsers address.

So you don't need it normally, unless you want to tell the browser to use a different base than the current address.

What's the difference between different combinations of slashes in base tag href attribute

You can just test it:

var base = document.head.appendChild(document.createElement('base')),    a = document.body.appendChild(document.createElement('a')),    urls = ["http://domain.com/homework", "http://domain.com/homework/", "/homework", "/homework/", "homework/", "homework"];a.href = "foo";for (var url of urls) {  base.href = url;  console.log('Using base: ' + url + '\nRelative URL: foo\nAbsolute URL: ' + a.href);}

div.as-console-wrapper { max-height: 100%; }