HTML target Attribute

Introduction

In HTML, the target attribute is used with hyperlinks to specify where the linked document should be displayed. By default, clicking a link opens the destination in the same browser tab. With target, you can open links in a new tab, a named iframe, or (in legacy frame layouts) a specific frame.

The most common value is _blank, which opens a link in a new tab or window. Always pair external _blank links with rel="noopener noreferrer" for security.

What You’ll Learn

Purpose of target

The primary purpose of the target attribute is to define the browsing context for the linked document. It gives developers flexibility in how users interact with linked content—keeping users on your page while they view external resources, or loading content into a specific iframe.

Use it thoughtfully: opening many links in new tabs can disorient users. Reserve _blank for cases where losing the current page would be harmful (such as mid-form workflows or PDF downloads).

📝 Syntax

Add target to an anchor with an href:

<a
  href="https://www.example.com"
  target="_blank"
  rel="noopener noreferrer">
  Visit Example.com
</a>

Syntax Rules

• Most common on <a href="...">.
• Also valid on <form> (see formtarget for submit buttons), <area>, and <base>.
• Values: keyword (_blank, _self, _parent, _top) or a custom frame/window name.
• Default when omitted: _self (same tab).
• Custom names match name on <iframe> or window.open.
• IDL property: HTMLAnchorElement.target.

💎 Values

The target attribute accepts keyword values and custom frame names:

• _blank — Opens the linked document in a new, unnamed browsing context (usually a new tab).
• _self (default) — Opens in the same browsing context (same tab or frame).
• _parent — Opens in the parent frame. If there is no parent, behaves like _self.
• _top — Opens in the top-level browsing context, breaking out of nested frames.
• Custom name (e.g. myFrame) — Opens in a frame, iframe, or window with that name.

_blank

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>

_self

<a href="https://www.example.com" target="_self">Visit Example.com</a>

_parent and _top

<a href="https://www.example.com" target="_parent">Parent frame</a>
<a href="https://www.example.com" target="_top">Top window</a>

Custom frame name

<a href="page.html" target="myFrame">Load in iframe</a>
<iframe name="myFrame" title="Content panel"></iframe>

Applicable Elements

target vs window.open() vs same-tab links

Examples Gallery

Open in new tab, load into a named iframe, and set target dynamically with JavaScript.

<a
  href="https://www.example.com"
  target="_blank"
  rel="noopener noreferrer">
  Visit Example.com
</a>

<a href="https://www.example.com" target="myFrame">Load in panel</a>
<iframe name="myFrame" title="Embedded content" width="600" height="300"></iframe>

<a id="dynamicLink" href="https://www.example.com">Go to Example.com</a>

<script>
  document.getElementById("dynamicLink").target = "_blank";
  document.getElementById("dynamicLink").rel = "noopener noreferrer";
</script>

♿ Accessibility

• Warn about new tabs — If using _blank, indicate it visually or in link text (e.g. “opens in new tab”) so screen reader users are not surprised.
• Use rel="noopener noreferrer" — Protects all users from malicious redirect attacks via window.opener.
• Give iframes a title — Required for screen readers to describe embedded content.
• Avoid unexpected new windows — Opening tabs without warning harms navigation predictability.
• Prefer same-tab for essential flow — Multi-step tasks should usually stay in one tab.

💡 Best Practices