Labs ICT
โญ Pro Login

Link Targets

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.

๐Ÿงช Quick Quiz

Which target value opens a link in a new tab?