Area Tag in html5, Definition of tag in HTML5.
Definition of area tag of html5.
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.
