a target attribute
The target attribute on the a element:
- allows you to specify the browsing context in which the linked resource will display ⁄open
- target is a specific attribute → can be applied ONLY on the next HTML5 elements: a, area, base, form
The target attribute values:
- _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)" | > | ... | <⁄> | example |
|---|---|---|---|---|---|---|---|
| 6. | target | = | _blank, _self, _parent, _top, a valid browsing-context name | < href="file.php" target="_blank">... <⁄> < href="file.php" target="_self">... <⁄> < href="file.php" target="_parent">... <⁄> < href="file.php" target="_top">... <⁄> < href="file.php" target="browsing_context-name">... <⁄> |
Video demonstration a target attribute
HTML5 a target attribute Tutorial
| min | video details |
|---|---|
| 00:10 | video tutorial: a element, target attribute objective: understanding target attribute |
| 00:19 | the target attribute: - is optional - can be used only if href attribute is present - allows you to specify the browsing context in which the linked resource will display open |
| 00:30 | since href attribute is present on both a elements, we can add the target attribute also to them |
| 00:37 | running a test without the target attribute |
| 00:39 | the linked resources open in the same browsing context; --the default value _self of the missing attribute target represents browser's default behavior |
| 00:48 | adding the target attribute to a element |
| 00:56 | adding a value to target attribute: _blank; which means that the linked resource will open in a new blank browsing context (=a new browser window) |
| 01:05 | running new tests: - the target attribute is present on the 1st a element → its linked resource opens in a new window -- the target attribute is absent on the 2nd a element → its linked resource opens in the same window |
| 01:06 | adding the same value:_blank to the 2nd a element |
| 01:21 | test: - the linked resource with its anchor opens in a new blank browsing context too |