HTML Target Attribute
Understanding the Target Attribute
Before we understand the particulars of adding a target attribute in HTML, it's important to define the term "attribute." An attribute is a simple means of defining traits or characteristics for an HTML element. It's like sticking a sticky note on an object to give it a specific trait. One of these sticky notes is the target property in HTML.
The target property is commonly found in (anchor) and form tags. It specifies where the linked resource will open or where the form data entered will be displayed. Now, let's delve into the intricacies of adding a target attribute to HTML.
Using Anchor Tags with the Target Attribute
In HTML, hyperlinks are created using anchor tags, also known as a tags. Where the link should open is specified by the target property. The target attribute can have one of four potential values:
- _blank: This hyperlink opens in a new tab or window;
- _self: By default, this hyperlink opens in the same frame.
- _top: Opens the link in the current window's whole body.
- _parent: Opens the link in the parent frame.
Syntax:
<a target="_blank | _self | _parent | _top | framename"\>
Let's see an illustration of the target attribute's usage in an a tag:
<a href="https://www.illustration.com" target="_blank">Visit illustration.com</a>
In this case, opening the URL "https://www.illustration.com" in a new window or tab will result from clicking on the hyperlink text "Visit illustration.com."
Utilizing Form Tags Target Attribute
Form tags can also utilize the destination element to indicate the location of the server response that will be shown once the form data has been submitted. The allowable values are identical to those of a tag. Here's one instance:
<form action="/submit_form" method="post" target="_blank">
<!-- elements of form present here -->
</form>
After submitting the form, a new window or tab will open with the server's answer.
Why to Use the Target Attribute and When to do so
By regulating how links and form submissions behave, the target attribute is a helpful feature that may improve the user experience on a website. When you wish to provide a user with more information or resources while keeping them on your website, for example, utilizing target="_blank" might be useful. Nevertheless, it is important to note that using target="_blank" excessively might result in a crowded browser window or tab experience.
A Cautionary Note with Target: "_blank"
Target="_blank" has many uses, but it may also be dangerous for security. Since the new page, by default, has access to the window.opener property, it may be able to change the old page. Use rel="noopener" in conjunction with target="_blank" to avoid this, like in this example:
<a href="https://www.illustration.com" target="_blank" rel="noopener">Visit illustration.com</a>
This makes sure that the window.the new page cannot use the opener property to access your page.
<!DOCTYPE html>
<html>
<body>
<h2>Example for the a target attribute</h2>
<p>Open the link in a new window or new tab: <a href="https://www.youtube.com/" target="_blank">Visit Youtube!</a></p>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<title>
Example for HTML target Attribute
</title>
</head>
<body style="text-align:left;">
<h2 style="color:red;">
Example for HTML target attribute
</h2>
<h2>HTML target Attribute</h2>
<a href="https://www.youtube.com/" alt="YT">
Youtube Link
</a>
</body>
</html>
Output:
HTML uses the <base> target Attribute to set the default target for all forms and hyperlinks on the page. The target attribute for each hyperlink and the form might potentially override this attribute.
Target: "_parent"
The target page will open in a parent frame if the target="_parent" property value is set.
The destination page may be an answer to a form input or a website that is linked to.
Example
An <a> tag with target="_parent". This link is included within a <iframe>.
When you click on the link, the connected page (the parent) opens in the tab of your current browser.
Note: The linked page would open inside the iframe if target="_parent" weren't present.
<html>
<body>
<iframe width="200" height="50"
style="border:4px solid red;padding:15px 0 0 15px"
srcdoc="<a target='_parent' href='/html'>Example for HTML</a>">
</iframe>
</body>
</html>
Output:
Target="_parent"
- The target property indicates the location of the linked page or form response's opening.
- The page opens in the parent frame (frame, tab, or window) when the target="_parent" value is used.
- The page will show in the current frame if no parent frame is discovered.