w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

base href attribute

The href attribute on the base element:


<baseattribute="value(s)"> Examples
1.href=URL<base href="http://www.example.com/folder1/">
<base href="http://www.example.com/folder1/index.php">

Video demonstration base href attribute

HTML5 base href attribute, Tutorial

min video details
00:01 launching Firefox
00:05 accessing the html demo file
00:07 base tag allows you to set a base url for all relative urls in page taht don't precede it
00:14 one of the 2 attribute (href, target) or both, are required on base element
00:20 in this video we will demonstrate the <base> tag together with the href attribute
00:24 the file called "index_no_base_element.php" has no <base> tag inside it
00:33 inside head section, there's only 3 elements: meta, title and link; no base element
00:38 adding the <base> tag before link element inside the head section
00:46 adding also the href attribute to it
00:52 adding the value of the href attribute = a valid absolute url which will represent the base url; url which will resolve all relative urls in page
00:54 since we will upload this test file on w3v-test.com, we will specify the base(absolute) url as: http://www.w3v-test.com/
01:06 note: all our resources are located inside the "basetest" folder: the main.css file, the images...
01:24 we can extend our base url to include this basetest directory too
01:32 thus, we no longer have to specify it on each resource → it can be removed → shorter relative urls
01:43 http://google.com is an absolute url; our fresh set base url has no impact on it; the base url impactes only relative urls AND only those which don't precede it
01:53 accessing on server an html page which does not contain the base url
01:54 in browser's first tab: the html page contains base element
in browser's fsecond tab: the same html page but this one does not contain the base element
02:11 comparing the source code of the 2 html pages:
- left side: base url present, includes basetest folder → the relative urls no longer contain basetest folder
- right side: base url absent → basetest folder specified on all relative urls
02:28 TEST:
- opening Location1 hyperlink, from the html page which includes a base url
- opening Location1 hyperlink, from the html page which does not contain the base element
02:43 the resulting url is the same, opens the same page, no difference
base intro base optional base occurrences base browser display base parents all browsing contexts override browsing contexts base resolves only URLs.. base syntaxbase target attribute