Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | <area> shape Attribute

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The HTML area shape Attribute is used with the coords attribute to describe the size, shape, and placement of a <area> element.

Syntax: 

<area shape="default | rect | circle | poly">

Attribute Values: 

  • default: It is used to specify the entire region.
  • rect: It is used to specify the rectangular region.
  • circle: It is used to specify a circular region.
  • poly: It is used to specify the polygonal region.

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML area shape Attribute
    </title>
</head>
 
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
          HTML <area> shape Attribute
    </h2>
    <img src=
         alt="alt_attribute"
         width="300"
         height="119"
         class="aligncenter"
         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 area: 
 

After click on specific area: 

Supported Browsers: The browsers supported by HTML area shape Attribute are listed below: 

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

My Personal Notes arrow_drop_up
Last Updated : 20 Jul, 2022
Like Article
Save Article
Similar Reads
Related Tutorials