Categories
HTML Web development

HTML target Attribute

HTML target Attribute

The HTML target attribute defines the target for where to open the linked document or where to submit the form.

The HTML target attribute belongs to the following tags:

HTML <a> target Attribute

Syntax:

<a target="_blank|framename|_parent|_self|_top"> 

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Open link in a new tab: <a href="https://www.lenastanley.com/" target="_blank">CodeLife:Animations</a></p>

</body>
</html>

Output:

Open link in a new tab: CodeLife:Animations

HTML <area> target Attribute

Syntax:

<area target="_blank|framename|_parent|_self|_top"> 

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg" target="_blank">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif" target="_blank">
</map>

</body>
</html>

Output:

Click on the laptop or the cup of coffee to open an image in a new tab:

homeOffice laptop coffee

HTML <form> target Attribute

Syntax:

<form target="_blank|framename|_parent|_self|_top"> 

_blank – opens the linked document in a new window or tab.

framename – opens the linked document in the named iframe.

_parent – opens the linked document in the parent frame.

_self (default) – opens the linked document in the same frame as it was clicked.

_top – opens the linked document in the full body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="first-name" name="firstname"><br><br>
  <label for="lname">Surname:</label>
  <input type="text" id="surname" name="surname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:







Enjoy coding!

Read also:

HTML action Attribute

HTML data-* Attribute