3

I'm working on setting up a website using pretty straightforward HTML/CSS. The one slightly tricky thing I am doing involves the <base> tag. I want to be able to load my website pages both on my local filesystem (so I can test the website locally easily, before uploading it) and of course from my actual website. So in my <head> tag I put something like:

<base href="." />

or

<base href=".." >

The purpose of this tag is to make the base URL for the page be the root page for my website, whether I'm looking at the page locally or over http:. Then my URLs are always relative to that root; to link to a page called "support.html" that is located in the root directory of my website I can just do href="support.html", to link to an image in an "images" directory inside that root directory I can do "images/myimg.jpeg".

This works great. I have uploaded my website to my server, and I can browse my pages and follow the links using Safari, Chrome, and Firefox; all three browsers seem to have no problem with the way I'm using the <base> tag. At the same time, I can open one of my .html files directly from the filesystem on my local machine, and see everything fine. As far as I can tell, what I'm doing is perfectly legal HTML, just perhaps slightly unconventional.

But the W3C Link Validator doesn't seem to think so. It barfs all over the place with errors like:

Line: 208 /developer.html
Status: 400 URL must be absolute
This is usually the sign of a malformed URL that cannot be parsed by the server. Check the syntax of the link.

Note that at line 208 the link given is <A HREF="developer.html" target="_blank">; the W3C validator appears to have incorrectly prepended a leading / onto it, rather than using the base URL given in the page.

So my question is: is the W3C Link Validator simply wrong? Is it too dumb to understand <base> tags even though they are legal HTML? Or is there, in fact, something wrong with what I am doing, such that I need to fix my pages (even though they work fine in all the browsers I've tried)?

Note that these are not just warnings. They are preventing the W3C Link Validator from correctly testing my page's links. There is, in fact, a bad link on the page, but the validator does not find it, because it is too wrapped up in these "URL must be absolute" issues to correctly test the links.

Thanks! Oh, and if it matters, this is DTD HTML 4.01 Transitional.

Oriol
  • 274,082
  • 63
  • 437
  • 513
bhaller
  • 1,803
  • 15
  • 24
  • 1
    Unrelated question: why not use HTML 5? – Jon Egeland Feb 21 '15 at 19:38
  • 2
    In HTML4, [conforming base URLs must be absolute](http://www.w3.org/TR/html4/struct/links.html#adef-href-BASE). – Alohci Feb 21 '15 at 19:48
  • Consider removing `` and using `href="/support.html"` – Oriol Feb 21 '15 at 19:53
  • Oriol, that does not achieve the behavior I want. href="/support.html" would evaluate that relative to the base URL, which would work fine for the http: case, but would not work when I open the .html file locally, because in the latter case there is no concept of the "base URL for the site", relative to which "/support.html" would be evaluated. – bhaller Feb 21 '15 at 22:51
  • Alohci, yes, you seem to be right; "This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs". Sigh. So the spec explicitly prevents what I was trying to achieve, for no apparent reason. Sigh. OK. Is there any drawback to breaking the rules here (except that W3C's link validator doesn't work)? As mentioned above, all browsers seem to be fine with the relative base URL. – bhaller Feb 21 '15 at 22:55
  • Jon: for one thing, it is not actually finalized yet, right? I see no reason to be on the bleeding edge of that. For another thing, it confers no benefit that I can see, and would require me to rewrite hundreds of pages of HTML that would be non-conforming. – bhaller Feb 21 '15 at 22:58
  • 1
    [HTML 5 changes the rules and allows relative URLs](http://www.w3.org/TR/html5/document-metadata.html#the-base-element), but it looks like the link validator hasn't been updated to respect that yet. You could consider filing a bug report for it if you get the same result with an HTML 5 Doctype. – Quentin Feb 26 '15 at 23:24

1 Answers1

1

Here is a very ugly JS solution. Does not directly answer the question, but "contributes something to the conversation" I think by providing hopefully equivalent functionality to <base>

window.onload=function () {
    var baseURL="..";
    var a=document.getElementsByTagName('a');
    for (link in a) {
        if (isRelative(a[link].href)) {
            a[link].href=baseURL+"/"+a[link].href;
       }
    }
};       

function isRelative(url) {
    var r = new RegExp('^(?:[a-z]+:)?//', 'i');
    return r.test(url);
}

see: How to test if a URL string is absolute or relative?

Because, as @alohci said, spec dictates it must be an absolute path: http://www.w3.org/TR/html4/struct/links.html#edef-BASE

Community
  • 1
  • 1
chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • 1
    Ah, good idea. If my violation of the spec, by using a relative base URL, ever turns out to actually bite me in some practical way, I will probably adopt this solution. It's an ugly hack, but my pages are simple enough that I think it would work well and reliably. Thanks! – bhaller Feb 27 '15 at 03:13