HTML Link Targets

HTML link targets control where a linked webpage or resource opens when a user clicks an HTML link. The target attribute of the <a> element is used to specify the browsing context in which the linked document should open.

Link targets are useful when you want a page to open in the current tab, a new tab, a parent frame, or a specific frame.

If you are new to hyperlinks, first learn about HTML Links and HTML Link Syntax.

The HTML target Attribute

The target attribute is added to an <a> element.

Syntax

<a href="URL" target="value">Link Text</a>

The value of target determines where the browser opens the linked resource.

For example:

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

Here, _blank tells the browser to open the link in a new browsing context.

target="_blank"

The _blank value usually opens the linked document in a new tab or window.

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

This is commonly used for external websites when you want users to keep the current webpage open.

For links that open a new browsing context, you can also use rel="noopener":

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

target="_self"

The _self value opens the linked document in the current browsing context. This is generally the default behavior for an HTML link.

<a href="about.html" target="_self">
    About Us
</a>

You usually do not need to specify _self because a normal link already behaves this way.

target="_parent"

The _parent value opens the linked document in the parent browsing context.

It is mainly useful when working with nested browsing contexts such as frames or iframes.

<a href="about.html" target="_parent">
    About Us
</a>

If there is no parent browsing context, the browser generally treats the link similarly to _self.

target="_top"

The _top value opens the linked document in the top-level browsing context.

<a href="home.html" target="_top">
    Home
</a>

This can be useful when a webpage is displayed inside a frame and you want the destination to replace the entire browser window rather than remain inside the frame.

Using a Named Target

You can also specify a custom name as the target.

<a href="page.html" target="mywindow">
    Open Page
</a>

A named browsing context can be reused by other links:

<a href="page1.html" target="mywindow">
    Page 1
</a>

<a href="page2.html" target="mywindow">
    Page 2
</a>

The links can use the same named browsing context.

HTML Link Target Values

The most common target values are:

TargetDescription
_blankOpens the link in a new browsing context
_selfOpens the link in the current browsing context
_parentOpens the link in the parent browsing context
_topOpens the link in the top-level browsing context
nameOpens the link in a named browsing context

Link Targets and Internal Links

Link targets can also be used with internal website pages.

<a href="/html/html-images/" target="_self">
    HTML Images
</a>

For websites with many related tutorials, using normal internal links helps users navigate between topics. You can learn more about internal navigation in HTML Link Syntax.

Best Practices for HTML Link Targets

Use the default _self behavior for most internal navigation. Use _blank when opening a separate resource in a new browsing context is genuinely useful.

Avoid opening every link in a new tab because it can make navigation confusing for users. Always use meaningful link text and choose the target based on the purpose of the link.

Understanding HTML link targets helps you control how hyperlinks behave and provides a better navigation experience for website visitors.

1 thought on “HTML Link Targets”

Comments are closed.