HTML target Attribute

HTML target Attribute

The HTML target attribute specifies the navigable where a hyperlink opens or where the result of a form submission is displayed. It can also be used with the <base> element to establish a default target for hyperlinks and forms in a document.

Elements That Use the target Attribute

The target attribute is used with the <a>, <area>, <base>, and <form> elements. :contentReference[oaicite:0]{index=0}

target Attribute Value

The target attribute accepts a valid navigable target name or one of the special keywords _self, _blank, _parent, or _top. Names beginning with an underscore are reserved for special keywords. :contentReference[oaicite:1]{index=1}

The _self Value

The _self keyword opens the destination in the current navigable. This is also the ordinary behavior when no target is specified for a hyperlink or form submission. :contentReference[oaicite:2]{index=2}

<a href="contact.html" target="_self">Contact Us</a>

The linked document replaces the current document in the same browsing context.

The _blank Value

The _blank keyword directs the navigation to a new top-level navigable, which is commonly presented as a new browser tab or window depending on the browser and user preferences. :contentReference[oaicite:3]{index=3}

<a href="https://www.example-web.site/" target="_blank">Open Example Website</a>

Modern HTML processing also treats a hyperlink using target="_blank" as having noopener behavior unless rel="opener" is explicitly used. :contentReference[oaicite:4]{index=4}

The _parent and _top Values

The _parent keyword targets the parent navigable. If there is no parent, it behaves like _self. The _top keyword targets the top-level navigable and behaves like _self when the current navigable is already at the top level. Sandbox restrictions can affect these behaviors. :contentReference[oaicite:5]{index=5}

<a href="contact.html" target="_parent">Open in Parent</a>

<a href="contact.html" target="_top">Open at Top Level</a>

These values are most relevant when a document is displayed inside nested browsing contexts such as an <iframe>.

Named Targets

A custom target name can direct multiple links to the same named navigable. If a suitable navigable with that name already exists, it can be reused; otherwise, a new one can be created when navigation is permitted. :contentReference[oaicite:6]{index=6}

<a href="flowers.html" target="example-window">Flowers</a>
<a href="vegetables.html" target="example-window">Vegetables</a>

Both links use the same target name, allowing their destinations to use the same named browsing context instead of requesting a different new one for each link.

Using target with <base>

When used on the <base> element, target establishes the default target for hyperlinks and form submissions in the document. A target specified directly on an <a>, <area>, or <form> element takes precedence over the default. :contentReference[oaicite:7]{index=7}

<head>
  <base target="_blank">
</head>

The first <base> element with a target attribute establishes the default target. The element must appear before elements in the document tree that represent hyperlinks. :contentReference[oaicite:8]{index=8}

Using target with <form>

On a <form> element, the target attribute specifies the navigable used for the result of the form submission. The HTML standard defines target as one of the attributes used for form submission. :contentReference[oaicite:9]{index=9}

<form action="results.html" method="get" target="_blank">
  <label for="search">Search:</label>
  <input type="text" id="search" name="search">
  <button type="submit">Submit</button>
</form>

In this example, the form submission result is directed to a new top-level browsing context.

Common Mistakes

Do not assume that target="_blank" always creates a visible new browser window. Browsers and user preferences can determine whether the new top-level browsing context appears as a tab or window.

Do not invent special target keywords by adding an underscore to a name. The defined special keywords are _blank, _self, _parent, and _top. :contentReference[oaicite:10]{index=10}

Do not confuse target with href. The href attribute identifies the hyperlink destination, while target specifies the navigable used to display that destination.

Do not assume that _parent and _top will always navigate outside an iframe. Sandbox restrictions can prevent certain navigation. :contentReference[oaicite:11]{index=11}

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The target attribute is widely supported on the elements where it applies, including <a>, <area>, <base>, and <form>.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the target Attribute

The example compares a normal link with a link using target="_blank". The first link uses the current browsing context, while the second requests a new top-level browsing context.

Summary

The HTML target attribute specifies the navigable used for hyperlink navigation or form submission results. The special keywords _self, _blank, _parent, and _top provide common navigation behaviors, while custom names can target named browsing contexts. The <base> element can also use target to establish a document-wide default.