HTML5 <base> Tag with root relative url

Question

Please help me understand the functionality of the <base> tag's href attribute.

I have a website hosted at http://goodsite.org/bob. other sites are hosted at http://goodsite.org/others.

I am planning to move my application to http://bettersite.org/bob.

In order to support this I have a base url in my header. <base href="/bob/">.

My links look something like this: <a href="thatonething.img">That one thing</a>

As hoped I am seeing the links as expected (e.g. "http://goodsite.org/bob/thatonething.img")

Question:

Does <base> tag universally support root relative urls (i.e. href="/bob/")?

This seems to work in my testing but I am having a little more trouble reading through the specifications. More generally I'm wanting to know if I am misusing this tag.

Answer 1

Does <base> tag universally support root relative urls (i.e. href="/bob/")?

Yes, <base> accepts domain-relative (path-absolute) URLs and will correctly resolve them relative to the host name.

<base href="/bob/"> means that you want all path-relative URLs (i.e. URLs that contain just a path but don't start with /) to be relative to /bob/, such that

• <a href="foo.html"> will point to /bob/foo.html, regardless of the domain.

Domain-absolute and path-absolute links will not be adjusted: respectively,

• <a href="https://stackoverflow.com"> will still point to https://stackoverflow.com, and
• <a href="/bar"> will still point to /bar.

As long as this is how you intend for your path-relative links to behave, you're not misusing the <base> element this way. As always, when using the <base> element it's a good idea to test your links from time to time to make sure they're still pointing to the right URLs.