Share on Google+Share on Google+

HTML5 target attribute, Definition and use of target attribute.

Definition and use of target attribute of area tag in HTML5.

HTML5 target attribute, Definition and use of target attribute.

In this tutorial we will inform about the target attribute of <area> tag in html5. This attribute is used for specifying the name of  the window or frame where the new document will be displayed when user click on the link given in the document. The target attribute helps to open the document in the same window or in another window or in another frame.

Declaration syntax:

The target attribute is defined as follows:

<area href="URL" target="value" />

The target attribute has four predefined values which are used according to the requirement.

Attributes values

  1. _blank       Linked document will open in new unnamed window.
  2. _parent     Linked document will open in the immediate parent frameset.
  3. _self          Linked document will open in the same frameset in which user clicks.
  4. _top          Linked document opens in the topmost frame i.e. covering entire window.

Difference between html4.0 and html 5

It is not possible every time to make the target a frame because frame and frameset are not supported mostly. 

The example for implementing few of the target values are as follows:

Here is the code for target.html

<!DOCTYPE html >
  <title> Example For Area Tag  target attribute</title>
  <img src="comp.gif" width="350" height="299"  usemap="#computermap" />
     <map name="computermap">
      <area  coords="16, 78, 123, 242"  href="cpu.bmp" shape="rect"  target="_parent"/>
      <area  coords="138, 90, 303, 239"  href="monitor.bmp" shape="rect"  target="_blank"/>
      <area  coords="70, 244, 324, 290" href="keyboard.bmp" shape="rect"  target="_top"/>


 The output of the above example is shown when we click the different regions in the image map ,which will be get by click the image given below

Note: See the browser compatible page for successfully rendering the program.

Download This Example.


Posted on: September 1, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null