W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

base intro base optional base occurrences base browser display base parents all browsing contexts override browsing contexts base resolves only URLs.. base syntaxbase href attributebase target attribute

HTML5 base element

The base element allows you to:
- set a base URL (absolute) for all the relative urls that don't precede it, through href attribute »video
- set a default browsing context through target attribute »video
- set a base URL AND a default browsing context if using both attributes: href, target »video

About base

Display & support base

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents base

Attributes base

observation: both href and target attributes can be used in the same time on the base tag: <base href="" target=""> »video

Browsing contexts

All browsing-contexts explained: new, current, parent, top, nested »video

Override, on Element level, the default browsing context set through base element »video


The base tag resolves only the relative URLs that don't precede it »video

Syntax base

1<base> »video

Attributes and Values base (comma separated)

<baseattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.href=URL»video<base href="http://www.example.com/folder1/">
2.target=_blank, _self, _parent, _top,
a valid browsing-context name
»video<base target="_blank">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img
2.class=class name»html »img
3.contenteditable="",  , true, false »html
4.contextmenu=menu id value»html
5.data-*= value -
6.dir=ltr, rtl, auto»html
7.draggable= true,  , false»img
8.dropzone= copy, move, link, string:, file: -
9.hidden= "",  , hidden»html »img
10.id=id name»html »img
11.itemid= URL -
12.itemprop= string »link »a
13.itemref= string -
14.itemscope= "",  , itemscope-
15.itemtype= absolute URL -
16.lang=language code »html »head»title »img
17.spellcheck="",  , true, false»html
18.style=CSS property:value»html »img
19.tabindex= integer »img
20.title=text»html »link»style »abbr»dfn
»img »meter
21.translate="", yes, no»html »img
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration base element

HTML5 base element: set base url, set browsing context

min video details
00:08 in this video demonstration we will use both attributes on bas tag: href and target
00:14 view Page Source code
00:14 THE href ATTRIBUTE
00:17 the base url is set through href attribute; in other words, the value of the href attribute represents the base url, which in our case is:
00:23 this base url will resolve all relative urls in page that don't precede it; linked.html is one of them
00:30 it means that the result url will be: base url + relative url
00:34 mouse over the hyperlink Location1, in the left bottom corner you'll see the url requested by the browser to the server which is: the base url (absolute) + the relative url
00:37 this is how the base url (absolute) resolves the relative urls in page
00:43 THE target ATTRIBUTE
00:44 it means that the targeted browsing context for all hyperlinks/forms that involves navigation, will be: a blank new browsing context → the linked pages for example will open in a brand new window or tab depending on your browsing settings
00:54 checking browser's settings: Tools - Options - Tabs - Open new windows in a new tab instead
00:57 test: clicking on Location1, which is a hyperlink
00:58 test result: ok; the page opened in a new tab
01:00 changing browser's settings: Tools - Options - Tabs - Open new windows in new window
01:05 test: clicking on Location1, which is a hyperlink
01:07 test result: ok; the page opened in a new window
01:08 new window versus new tab; both represents a new browsing context targeted through the value "_blank" of the target attribute

For more information about the base element, please see the specs: W3CWHATWG