base
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
- display in browser »video
- display: none
Parents base
- base nested within elements »base parents
»examples
Attributes base
- required: at least one: href or target
- optional: href or target, global attributes, event attributes
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
Warning
The base tag resolves only the relative URLs that don't precede it »video
Syntax base
| 1 | <> »video |
Attributes and Values base (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| 1. | href | = | URL | »video | < href="http://www.example.com/folder1/"> | |
| 2. | target | = | _blank, _self, _parent, _top, a valid browsing-context name | »video | < 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: http://www.w3v-test.com/base_target/ |
| 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 http://www.w3v-test.com/base_target/linked.html |
| 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 element, please see the specs: W3C ⁄ WHATWG