Skip to content
Related Articles
Open in App
Not now

Related Articles

How to specify the coordinates of an area in HTML5 ?

Improve Article
Save Article
  • Last Updated : 08 Mar, 2021
Improve Article
Save Article

In this article, we will see how to set the coordinates of the <area> element in HTML5. The coords attribute of <area> is used to specify the coordinate of an area in an image-map. The shape attribute is used to specify the size, shape, and placement of the area. The coordinates (0, 0) denotes the top-left corner of the sketch.


<area coords="value">

Example: In this example, the three shape areas are specified with the shape parameter and coordinates so that they can be clicked on to view the shape.


<!DOCTYPE html>
    body {
      text-align: center;
    h1 {
      color: green;
    How to specify the coordinates
    of the area in HTML5?
  <img src=
       width="300" height="119" 
       usemap="#shapemap" />
  <map name="shapemap">
    <!-- area tag contained image. -->
    <area shape="poly"
          coords="59, 31, 28, 83, 91, 83"
    <area shape="circle" 
          coords="155, 56, 26"
    <area shape="rect" 
          coords="224, 30, 276, 82"


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!