Home Tutorial Html Html5 Area Tag in html5, Definition of tag in HTML5.

 
 

Share on Google+Share on Google+
Area Tag in html5, Definition of tag in HTML5.
Posted on: September 1, 2010 at 12:00 AM
Advertisement
Definition of area tag of html5.

Area Tag in html5, Definition of  <area> tag in html5

In this section we will discuss the use of <area> tag and about its implementation in the html document.

The <area> tag is used for creating an area in the image map (with <map>tag). Image map is the image divided in to clickable areas or we can say mouse sensitive areas. It means when we click on those areas in the image map it sends to another page or resource. It works just like a hyperlink works in the text. For this hyperlink action we use the href attribute in the <area> tag .

The <area> tag is used only within the <map> tag, the regions within image map is mouse sensitive.

Declaration syntax:

The syntax for the <area> tag is as follows:

<area coords="value" href="resource" shape="rect" />

Attributes of <area> tag.

In the <area> tag there are so many element specific attributes given below:

  • alt
  • coords
  • shape
  • href
  • hreflang
  • target
  • ping
  • rel
  • media
  • type

The code for implementing the area tag is as follows:

In this Example we use the three attributes of  <area> tag. Here is the description of the attributes:

alt

This attribute defines the alternate text message within each clickable area in the map. This attribute is used only when browser can't read or render the image and href attribute is present.

coords  

This attribute defines the co-ordinates of  the mouse sensitive (clickable) areas of any shape on  the image map. The co-ordinates are defined according to the shape of  area. 

href

The href attribute specifies the URL link for the area tag in the image map.Each tag have a link.

shape

This attribute defines the shape of the area selected in the image map for link as a clickable region. the following shapes can be possible in this attribute, circle(circ), polygon (poly), rectangle ( rect).

Example_area_tag.html.

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

Output: For getting output, please click the image and then any part of the image.

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

Download This Example.

Advertisement

Related Tags for Area Tag in html5, Definition of tag in HTML5.:


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.

Posted on: September 1, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com