By default, clicking a link loads the new page in the same browser tab. That is usually fine for navigating within your own site, but sometimes you want to open a link in a new tab or control exactly where the page loads. That is where the target attribute comes in.
Opening in a New Tab
The most common use of target is _blank, which opens the link in a new tab or window. This is great for external links so the user does not lose their place on your page.
<a href="https://www.example.com" target="_blank">Open in new tab</a>
Try it Yourself โ
All Target Values
There are four reserved target keywords you should know about:
<!-- Open in a new tab/window -->
<a href="page.html" target="_blank">New Tab</a>
<!-- Open in the same frame (default, usually you can skip this) -->
<a href="page.html" target="_self">Same Tab</a>
<!-- Open in the parent frame -->
<a href="page.html" target="_parent">Parent Frame</a>
<!-- Open in the full body of the window -->
<a href="page.html" target="_top">Full Window</a>
_self is the default behavior, so you rarely need to write it. _parent and _top are mainly useful when you are dealing with iframes or framesets.
Security Tip for _blank
When you use target="_blank", add rel="noopener noreferrer" to the link. This prevents the opened page from accessing your page's window object โ a security vulnerability called "tabnabbing."
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Safe external link
</a>
Most modern frameworks and linters will flag this if you forget it, so it is a good habit to build early.