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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
            alt="Triangle"> 
          
        <area shape="circle"
            coords="155,56,26"
            href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
            alt="Circle"> 
          
        <area shape="rect"
            coords="224,30,276,82"
            href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
            alt="Square"> 
    </map>
</body>
  
</html>