Maximus Maximus - 6 days ago 5
HTML Question

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

I've noticed that a browser behaves differently if I mix slashes in the

href
attribute of
base
tag. I know what
base
tag is used for. I'm wondering what's the difference in terms how a browser resolves the path in the following configurations:

<base href="http://domain.com/homework">
<base href="http://domain.com/homework/">
<base href="/homework">
<base href="/homework/">
<base href="homework/">
<base href="homework">

Answer

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%; }

Comments