HTML - target Attribute

HTML target attribute is used to specify where to open the linked document.

The target attribute specifies the default target for all hyperlinks and forms in the page for the <base> tag. And this attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form for the <form> tag.

Syntax

<element target = "_blank | _self | _parent | _top | framename " \>

Following are the attribute values:

_blank: Opens the link in a new window.
_self: Opens the link in a same frame it is a default value.
_parent: Opens the link in the parent frameset.
_top: Opens the linked document in the full body of the window.
framename: Opens the linked document in the named frame.

Applies on

The below-listed elements allow the use of the HTML target attribute.

Element	Description
<a>	HTML <a> tag defines a hyperlink. It’s used to link from one page to another.
<area>	HTML <area> tag specifies the areas of the image, mapping that can be clicked on or are active areas that are linked to by hyperlinks.
<base>	HTML <base> tag is used to specicify base URL.
<form>	HTML <form> tag is used to collect user input on a website throuugh a form.

Examples of HTML target Attribute

Below examples will illustrate the HTML target attribute, where and how we should use this attribute!

Using target attribute with "a" Tag

On running the below code, it will generate an output with hyperlink. When the user clicks the link, tutorialspoint website opens in a new window or tab.

<!DOCTYPE html>
<html>
<head>
    <title>Target attribute with a Tag</title>
</head>
<body>
    <h3>Tutorialspoint</h3>
    <h2>Target attribute with a tag</h2>
    <p>Open link in a new window or tab: 
    <a href=
"https://www.tutorialspoint.com/index.htm" 
       target="_blank">Visit tutorialspoint
    </a>
    </p>
</body>
</html>

Using target attribute with "area" Tag

On executing the below code, an image map gets displayed with clickable areas. On clicking each area, corresponding links gets opened based on the target value specified.

<!DOCTYPE html>
<html>
<head>
    <title>HTML area Tag</title>
</head>
<body>
    <img src = "/images/usemap.gif" alt = "usemap"
         border = "0" usemap = "#tutorials"/>   
    <map name = "tutorials">
      <area shape = "poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" 
            alt = "Perl Tutorial" 
            target = "_blank">
      <area shape = "rect" 
            coords = "22,83,126,125" 
            alt = "HTML Tutorial"
            href = "/html/index.htm" 
            target = "_self">
      <area shape = "circle" 
            coords = "73,168,32" 
            alt = "PHP Tutorial"
            href = "/php/index.htm" 
            target = "_top">
    </map>
    <p>
        Click each of the above technologies 
        to view in different frame
    </p>
</body>
</html>

Using target attribute with "base" Tag

The output window displays a link. On clicking the link, tutorialspoint website gets opened in the same frame.

<!DOCTYPE html>
<html>

<head>
    <base target="_self">
    <title>Base tag with target Attribute </title>
</head>

<body>
    <h2>Base tag with target Attribute</h2>
    <p>Visit
    <a href=
"https://www.tutorialspoint.com/index.htm">
         Tutorialspoint</a>
         To Learn New Technologies
    </p>
</body>

</html>

Using target attribute with "form" Tag

When we run the below code, a form gets displayed. Upon submitting the form, tutorialspoint website opens in the parent tab.

<!DOCTYPE html>
<html>

<head>
    <title>form tag with target attribute</title>
</head>

<body>
    <h2>Target attribute in form tag</h2>
    <form action="/action_page.php" 
        method="post" 
        target="_parent">
        <label for="first_name">Enter name:</label>
        <input type="text" name="first_name" />
        <br>
        <p>
            Click on submit to view the tutorialspoint
            website on the same frame
        </p>
        <input type="submit">
    </form>
</body>

</html>

Supported Browsers

Attribute
target	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm