base resolves only the URLs that don't precede it
The base element resolves..
The <base href="url"> tag resolves only the relative URLs that come after it in page (= urls that don't precede it)
Watch the video demo below for an example.
Video demonstration base, when it applies
HTML5 base, when it applies, Tutorial
|00:02||open demo file in Notepad++|
|00:07||base tag is placed right after title tag preceding all relative urls in page → will apply to all, including to main.css relative url, from link element, head section|
|00:12||testing the file form server; everything is ok; the base url works fine|
|00:28||we tested from server the exact same file which is currently opened in Notepad++; note the source code, is identical|
|00:36||placing the base tag under the link tag → base tag no longer precede the relative url specified as value of the href attribute form the link element → the base url won't resolve this relative url: main.css → the style won't apply to the html page|
|00:50||tested from server this modified html file: base under link element|
|00:52||indeed, the style did not apply; because the main.css file's url is wrong, throwing a 404 Not found error message|
|00:56||we tested from server the exact same file which is currently opened in Notepad++; note the source code, is identical|
|01:10||checking the network requests in Web Console|
|00:14||stylesheet path is wrong; the base url did not resolve this relative url|