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
| min | video details |
|---|---|
| 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 |