Skip to content
Related Articles

Related Articles

Improve Article

HTML <area> Tag

  • Difficulty Level : Basic
  • Last Updated : 04 Feb, 2021

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
  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :