Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
target
Controls where links and forms open their results: same tab, new tab, parent frame, or a named browsing context.
Overview
The target attribute specifies where to display the result of a navigation: a link click or a form submission. It accepts keyword values for well-known browsing contexts or a custom name to open content in a specific window or frame.
Applies to: <a>, <area>, <form>, <base>
Values
| Value | Where it opens |
|---|---|
_self | Same browsing context (the default) |
_blank | A new, unnamed browsing context (new tab or window) |
_parent | The parent browsing context. If no parent, behaves like _self. |
_top | The topmost browsing context. Breaks out of all nested frames. |
name | A named browsing context. Reuses it if already open; creates it otherwise. |
Basic target usage
<!-- Default: opens in the same tab (target="_self" is implicit) --><a href="/about">About Us</a> <!-- Open in a new tab --><a href="https://example.com" target="_blank" rel="noopener noreferrer"> External Site</a> <!-- Form that opens results in a new tab --><form action="/search" target="_blank"> <input type="search" name="q" /> <button type="submit">Search in New Tab</button></form>Security: _blank and noopener
Historically, target="_blank" gave the opened page access to window.opener, allowing it to redirect your original tab to a phishing page. This required adding rel="noopener" as a countermeasure.
Modern browsers now imply rel="noopener" for all target="_blank" links by default. However, adding rel="noopener noreferrer" explicitly is still recommended for clarity and to support older browsers.
Named Targets
Any string that is not one of the underscore-prefixed keywords becomes a named browsing context. If a window or tab with that name already exists, the browser navigates it instead of opening a new one. This is useful for "preview" workflows.
Named target window
<!-- Both links open in the same named window called "preview" --><a href="/draft/page-1" target="preview">Preview Page 1</a><a href="/draft/page-2" target="preview">Preview Page 2</a> <!-- If "preview" is already open, the browser reuses it --><!-- If not, it opens a new window/tab with that name -->Targeting Frames and Iframes
You can target a specific iframe by matching the target value to the iframe's name attribute. Links and forms outside the iframe can load content into it.
Loading into an iframe
<!-- Parent page with an iframe --><iframe name="content-frame" src="/docs/intro" title="Content area"></iframe><nav> <!-- These links load inside the iframe --> <a href="/docs/chapter-1" target="content-frame">Chapter 1</a> <a href="/docs/chapter-2" target="content-frame">Chapter 2</a></nav>_parent and _top
Inside nested iframes, _parent navigates one level up and _top navigates the outermost window. These are essential for breaking out of frame hierarchies, such as redirecting to a login page from inside an embedded widget.
Iframe navigation
<!-- Inside a nested iframe: --> <!-- Navigate the immediate parent frame --><a href="/parent-page" target="_parent">Go to Parent</a> <!-- Navigate the outermost (top-level) window --><a href="/home" target="_top">Go to Home</a> <!-- Break out of all frames entirely --><a href="/login" target="_top">Log In</a>Setting a Default with base
The <base> element can set a default target for all links and forms on the page. Individual elements can still override it.
Default target via base
<!-- Set a default target for all links and forms on the page --><head> <base target="_blank" /></head> <body> <!-- These all open in new tabs (inheriting from <base>) --> <a href="https://example.com">Example</a> <a href="https://docs.example.com">Docs</a> <!-- Override the base target on a specific link --> <a href="/settings" target="_self">Settings (same tab)</a></body>Accessibility
Opening links in new tabs (target="_blank") can disorient users, particularly those using screen readers or who have cognitive disabilities. The user loses their back-button history and may not realize a new tab opened.
- Only use
_blankwhen there is a clear reason (external site, in-progress form would be lost). - Indicate that a link opens in a new tab, either visually (icon) or via text (e.g. "opens in new tab") or with
aria-describedbypointing to a hint. - Never force all links to open in new tabs via
<base target="_blank">unless the application context demands it (e.g. a link aggregator).
Limitations
- Popup blockers:
target="_blank"without a user gesture (e.g. triggered by JavaScript timers) may be blocked by popup blockers. - Named targets persist: A named window stays open until the user closes it. Subsequent links with the same target name reuse it, which can be confusing if the user forgot the window is open.
- Sandboxed iframes: The
sandboxattribute can block_topand_parentnavigation unlessallow-top-navigationis granted. - Mobile behavior: On mobile browsers,
_blankopens a new tab rather than a new window. Named targets may not behave consistently across mobile browsers.