base target attribute
The target attribute on the base element:
- → allows you to set a default browsing context for all hyperlinks in page or forms that implies navigation
- when applied on <base> all hyperlinks from the current page or forms from the current page that involve navigation, are affected
- target is a specific attribute → can be applied ONLY on the next HTML5 elements: a, area, base, form
The values of the target attribute:
- _blank : targeted browsing context: a new one: tab or window depending on your browsing settings
- _self : targeted browsing context: the current one (browser's default behavior)
- _parent : targeted browsing context: the parent browsing context
- _top : targeted browsing context: the top browsing context
- a valid browsing-context name: targeted browsing context: the browsing-context targeted through his name
Examples
| < | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 2. | target | = | _blank, _self, _parent,_top, a valid browsing-context name | < target="_blank"> < target="_self"> < target="_parent"> < target="_top"> < target="browsing-context_name"> |
Video demonstration base target attribute
HTML5 base target attribute Tutorial
| min | video details |
|---|---|
| 00:06 | the base tag allows you to set a default browsing context |
| 00:10 | the base tag must have at least one of the two attributes: href, target if not both of them |
| 00:14 | this video tutorial presents the base tag with the target attribute and its possible values |
| 00:18 | _blank |
| 00:19 | _blank value targets a new browsing context |
| 00:26 | 1. targeting a new browsing context for all urls in page <base > |
| 00:39 | refreshing the page |
| 00:41 | test: clicking a hyperlink in page |
| 00:43 | test result1: ok, the page opened in a new window |
| 00:48 | changing browser's settings: open new windows in a new tab instead |
| 00:51 | test result1: ok, the page opened in a new tab |
| 00:55 | _self |
| 00:56 | _self value targets the current browsing context (browser's default behavior) |
| 01:00 | 2. targeting the current browsing context for all urls in page <base target="_self"> |
| 01:03 | refreshing the page |
| 01:08 | test: clicking a hyperlink inside the iframe; the iframe represents the current context for the clicked hyperlink |
| 01:09 | test result1: ok, Page1 opened inside that iframe |
| 01:19 | _parent |
| 01:20 | _parent value targets the parent browsing context |
| 01:25 | 3. targeting the parent browsing context for all urls in page <base target="_parent"> |
| 01:28 | refreshing the page |
| 01:35 | test: clicking a hyperlink inside the iframe; the iframe represents the current context for the clicked hyperlink AND the whole window represents iframe's parent |
| 01:36 | test result1: ok, linked page opened inside iframe's parent = in this case, the browser's window ("this case" is strictly related to the location of the clicked hyperlink) |
| 01:41 | _top |
| 01:41 | _top value targets the top browsing context |
| 01:44 | 4. targeting the top browsing context for all urls in page <base target="_top"> |
| 01:49 | refreshing the page |
| 01:56 | test: clicking a hyperlink inside the small iframe; the small iframe represents the current context for the clicked hyperlink AND the whole window represents the top browsing context |
| 01:57 | test result1: ok, linked page opened inside the top browsing-context which is the browser's window |
| 02:02 | a valid browsing context name |
| 02:05 | let's open Page1 inside page's iframe |
| 02:12 | adding a valid name to our targeted browsing-context, the iframe |
| 02:20 | 5. targeting the browsing context whose name we use; applies to all urls in page, not only to Page1 <base target="x"> |
| 02:25 | refreshing the page |
| 02:30 | test: clicking a hyperlink on page |
| 02:31 | test result1: ok, the linked page opened inside the targeted browsing-context which is the iframe |