Skip to content
Related Articles

Related Articles

HTML <area> Tag

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 19 Jul, 2022
View Discussion
Improve Article
Save Article

This <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end-user. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. It has no closing tag and hence it is an empty tag for HTML but in the case of XHTML you need to close that properly. HTML5 has some new attributes.

Syntax: 

<area>

Attributes: This tag accepts lots of attributes as described below.

  • shape: The shape to be mapped on the image, can be a “rect”, a “circle” or a “poly”.
  • coords: The coordinates of the shape.
  • href: The href is the link where the user will be directed to after clicking the mapped portion of the image.
  • alt: Alternative text for a clickable area in an image map.
  • download: Download target when the hyperlink is clicked.
  • target: Context in which to open the link resource.
  • hreflang: Language of targeted URL.
  • media: Optimized URL for media or device.
  • rel: Relationship between URL and document.
  • type: Media type of URL

Example: The <area> tag in html. 

html




<!DOCTYPE html>
<html>
 
<body>
    <img src=
         alt="" width="300" height="119"
         class="aligncenter size-medium wp-image-910965"
         usemap="#shapemap" />
 
    <map name="shapemap">
        <!-- area tag contained image. -->
        <area shape="poly"
            coords="59,31,28,83,91,83"
            href=
            alt="Triangle">
         
        <area shape="circle"
            coords="155,56,26"
            href=
            alt="Circle">
         
        <area shape="rect"
            coords="224,30,276,82"
            href=
            alt="Square">
    </map>
</body>
 
</html>


Output: 

  • Before click on specific clickable area 

  • After click on the specific clickable area 

Note: This <area> tag is always nested in <map> tag.
Supported Browsers: 

  • Google Chrome
  • Edge 12 and above
  • Internet Explorer
  • Mozilla Firefox 1 and above
  • Opera
  • Safari

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!