HTML target Attribute


The target attribute of the <area> element allows you to set where the linked document will open, for example, new window, same frame, parent frame, etc.

Following is the syntax −

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

Here, _blank is used to open the linked document in new window or tab, _self opens the linked document in the same frame as it was clicked, _parent opens the document in the parent frame, _top opens the linked document in the entire body of the window, frame opens the linked document in a named frame.

Let us now see an example to implement the target attribute of the <area> elemen −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
   <h2>Learning</h2>
   <p>Learn these technologies with ease....</p>
   <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 = "_blank" />
      <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
   </map>
</body>
</html>

Output

In the above example, we have set the map on the following image−

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

Now, we have set the map and area within it for shape −

<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 = "_blank" />
<area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
href = "/php/index.htm" target = "_blank" />
</map>

Above, we have set the following to open the linked document in a new window i.e. _blank, which is used to open the linked document in new window or tab

target = "_blank"

Updated on: 29-Jun-2020

107 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements