Why base tag does not work for relative paths?

html tags base
ALH picture ALH · Jul 17, 2012 · Viewed 60.6k times · Source

I have a <base> tag as below in <head> section of the page: 

<base href="http://localhost/framework">

And a script as below which is relative (of course after <base>): 

<script src="/assets/jquery-1.7.1.min.js">

But when I open jQuery from firebug it shows: 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body> 
Blah Blah Blah....

When I use the below link it's OK though: 

<script src="http://localhost/framework/assets/jquery-1.7.1.min.js">

I looked for an answer everywhere, but it seems I'm doing my job right! So what is the problem?

Answer

Rudi Visser picture Rudi Visser · Jul 17, 2012

/assets/jquery-1.7.1.min.js is not relative but absolute*, the / takes it to the root even with a base tag.

If you remove that /, it should make it relative off the current path, which, when a base tag is present would be http://localhost/framework/.

Note: You will also need to add a trailing / to the end of the href, to indicate that it's a folder.

Full working example:

<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>

* Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.

Related questions

How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More
Adding attribute in jQuery

How can I add an attribute into specific HTML tags in jQuery? For example, like this simple HTML: <input id="someid" /> Then adding an attribute disabled="true" like this: <input id="someid" disabled="true" />

Read More
HTML tag <a> want to add both href and onclick working

I'd like to ask about HTML tag <a href="www.mysite.com" onClick="javascript.function();">Item</a> How to make this a tag working with href and onClick? (prefer onClick running first then href)

Read More