The target attribute controls where a link opens. target="_blank" opens a new tab/window; target="_self" is the default. For _blank, add rel="noopener noreferrer" for security. New tabs are a UX and security trade-off, so test keyboard flow and rel attributes.
Frontend interview practice question
What is the purpose of the target attribute in an <a> tag?
Interview quick answer
Interview focus
This HTML interview question tests whether you can explain HTML Anchor target Attribute: _blank, _self, _parent, _top, connect it to production trade-offs, and handle common follow-up questions.
- HTML Anchor target Attribute: _blank, _self, _parent, _top explanation without falling back to memorized definitions
- Anchor and Target reasoning, edge cases, and production failure modes
- How you would answer the most likely HTML interview follow-up
Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
Full interview answer
Quick answer: what the target attribute does
target sets the browsing context in which the linked document opens. _self opens it in the current tab or frame and is the default. _blank opens a new tab or window. _parent opens it in the parent browsing context of the current frame. _top opens it in the full window and escapes every frame. A frame name opens it inside that named <iframe>. When you use _blank, add rel="noopener noreferrer". The destination itself comes from the href attribute; target only decides where that destination opens.
Overview
The target attribute specifies where the linked page will open when a user clicks on a hyperlink. It’s part of the <a> (anchor) tag and defines the browsing context such as a new tab, a parent frame, or the current window.
Value | Description | Behavior |
|---|---|---|
| Opens the link in the same tab or frame | Default behavior |
| Opens the link in a new tab or window | Most commonly used for external links |
| Opens in the parent frame of the current one | Used inside nested frames |
| Opens in the full body of the current window | Breaks out of any frames |
framename | Opens the link in a specific named frame | Used in pages with multiple frames |
Example: Default Behavior (Same Tab)
<a href="https://www.example.com" target="_self">Visit Example</a>
The linked page replaces the current one; this is the default even if you omit the target attribute.
Example: Opening in a New Tab
<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>
When target="_blank" is used, the linked page opens in a new browser tab or window.
Example: Opening in a Named Frame
<a href="about.html" target="contentFrame">Open About Page</a>
<iframe name="contentFrame" width="400" height="200"></iframe>
In this example, the link opens inside the iframe with the name contentFrame.
Security Tip
When you use target="_blank", add rel="noopener noreferrer". noopener stops the new page from reaching window.opener (tab hijacking), and noreferrer also hides the referrer.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open example in a new tab</a>
Practical scenario
Open an external guide in a new tab while keeping internal links in the same tab.
Common pitfalls
- Using
target="_blank"withoutrel="noopener noreferrer", which is a security risk. - Overusing new tabs and hurting navigation flow.
- Forgetting to announce new-tab behavior for accessibility.
New tabs can preserve context but reduce control for users. Test with keyboard navigation and verify
rel attributes are set.Still so complicated?
Think of target as telling the link where to go — stay here (_self), open a new tab (_blank), or load inside a specific frame (contentFrame).
Summary
- The
targetattribute controls where a link opens. _selfis the default (same tab)._blankopens a new tab or window.- Use
rel="noopener noreferrer"with_blankfor safety. - You can target specific frames by name.
Use this as one explanation rep, then continue with the HTML interview questions cluster or a guided prep path.
Built in public
The code behind FrontendAtlas lives on GitHub. A star helps other frontend engineers find it.