Link Targets
Open links in a new tab with the target attribute.
Syntax
<a href="url" target="_blank">New tab</a>The target attribute tells the browser where to open the linked page.
Common target values
_self— opens in the same tab (the default)._blank— opens in a new tab or window.
When using _blank, it is good practice to add rel="noopener" for security.
Example
Loading editor…
Press Run to see the result.
When to use it
- A help center links to external documentation with target="_blank" so users do not leave the app.
- A dashboard links internal pages with target="_self" (the default) to keep navigation in the same tab.
- A developer uses target="_blank" on a PDF download link so the file opens in a new browser tab rather than replacing the current page.
More examples
Open link in new tab
target="_blank" opens the link in a new browser tab; rel="noopener noreferrer" is added for security.
<a href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer">
MDN Web Docs
</a>Open link in the same tab
target="_self" is the default; it navigates the current tab to the linked URL.
<a href="/dashboard" target="_self">My Dashboard</a>Link targeting a named iframe
target set to a frame name loads the linked document inside a specific <iframe> on the same page.
<iframe name="preview-frame" src="about:blank" width="600" height="400"></iframe>
<a href="/demo.html" target="preview-frame">Load Demo</a>
Discussion