Home > DeveloperSection > Articles > HTML 5 area tag

HTML 5 area tag

0 Comment(s)
 3047  View(s)
Rate this:

HTML 5 area tag

The HTML <area> tag is used for defining an area in an image map. Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page.

The <area> element always nested in map tag.

Attributes Description


Defines a shape for the clickable area. Possible values:

1.       Default: Specifies the entire region.

2.       Poly or Polygon: Defines a polygonal region.

3.       Rect or Rectangle: Defines a rectangular region.

4.       Circle or circ: Defines a circular region.


Specifies the target url of the area. It should be another image or link of another website.


This attribute will specify that where to open target link. It should be _blank, _parent, _self, _top or frame name.


This attribute will specify that which media device the target url is optimized for. The default value is all.


This attribute specifies language code of the destination URL. Only to be used when the href attribute is present.


This attribute specifies the MIME type of the linked resource. Only to be used when the href attribute is present.


This specifies text to be used in case the browser/user agent can't render the image.


Specifies the coordinates of the clickable area. Coordinates are specified as follows:

·         rect: left, top, right, bottom.

·         circle: center-x, center-y, radius.

·        poly: x1, y1, x2, y2, ...


Gives the URLs to be notified if the user follows the hyperlink. Only to be used when the href attribute is present.


Specifies the relation between current document and the target URL.Attribute values are shown below:

·         alternate

·         archives

·         author

·         bookmark

·         external

·         feed

·         first

·         help

·         index

·         last

·         license

·         next

·         nofollow

·         noreferrer

·         prev

·         search

·         sidebar

·         tag

·         up



    <img src="Desert.jpg" width="145" height="126" alt="Desert" usemap="#Desertmap" />

    <map name="Desertmap">

        <area shape="rect" coords="2, 39, 138, 123" alt="Desert"

            href="http://www.mindstick.com/developerssection.aspx" /> <!--using area tag where coords attribute is defined that specifies clickable area on image -->

        <area shape="circle" coords="75, 20, 20" alt="Flower"

            href="http://www.google.com" />



If user clicked on desert area then user will reach on MINDSTICK website, if user clicked on sky area on image then user will reach on GOOGLE.




Don't want to miss updates? Please click the below button!

Follow MindStick