Open In App

How to specify the shape of the area in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

In the present article, we will be learning about the shape attribute of the HTML area tag and how it can be used to specify the shape of the area in HTML5.

We use the shape attribute of the area element to specify the shape and can be paired up with the coords attribute to specify the shape, size, and placement of the area.

Syntax: 

<area shape="default/rect/circle/poly" coords="coordinate1,
corordinate2..." href="link" alt="alternate text">

Shape attribute values with their functionalities and coordinate attributes:

  • default: It is used to specify the entire region of an area in HTML.
    Coordinates: It has no coordinates since it spans the entire area.
  • rect: It is used to define a rectangular region.
    Coordinates :
    • x1, y1 for top-left.
    • x2, y2 for bottom-right.
  • circle: It is used to define a circular region.
    Coordinates :
    • x, y for the center of the circle.
    • rad for the radius of the circle.
  • poly: It is used to define a polygonal region.
    Coordinates:
    • x1, y1, x2, y2 … xn, yn for edges of the polygon. 

Note: If the first and last coordinate pairs are different, the last coordinate pair will be used to close the polygon.

The above has been summarized in a tabular form below :

Functionality Attribute Value Coords
To specify the entire region. default (defines the entire region)
To define a rectangular region. rect

x1, y1, x2,  y2 – first 2 for top-left

The next two for the bottom-right corner of

rectangle

To define a circular region. circle

x, y, rad – first two coordinates of the center of

circle and the last the radius.

To define a polygonal region. poly

x1, y1, x2, y2, …, xn, yn – coordinates of the edges of the polygon.

In case the first and last coordinate pairs are different, the last coordinate

pair will be used to close the polygon.

Below are a couple of examples to illustrate this attribute 

Example 1:

index.html




<!DOCTYPE html>
<html>
  <body>
    <img
      class="img"
      src=
      usemap="#map-gfg"/>
    <map name="map-gfg">
      <area
        shape="rect"
        coords="15,32,145,104"
        href="https://www.geeksforgeeks.org/"
        alt="GFG home page"
        target="_blank"/>
  
      <area
        shape="poly"
        coords="242,28.5,279.5,63.5,242,104,200,63.5"
        href=
Cj0KCQiA7YyCBhD_ARIsALkj54qc8HT6TPpLZAcGs-r2DF38ZnTHpNJ1cVIw1PqHj4e15x-34tSr6oYaAjwUEALw_wcB"
        alt="GFG data-structures course"
        target="_blank"
      />
    </map>
  </body>
</html>


Output: Here, the rectangle part of the image is linked to the official page of GeeksForGeeks, and the polygon part is mapped to the DSA course by geeks for geeks. Clicking on either will direct the user to the particular link associated with the shape. We set the coordinates of a particular shape according to the image chosen by us.

Here is a short gif to demonstrate the functionality of the above example.

Example 2 :

index2.html




<!DOCTYPE html>
<html>
  <body>
    <center>
      <img
        class="img"
        src=
        usemap="#map-gfg"/>
    </center>
  
    <map name="map-gfg">
      <area
        shape="circle"
        coords="91,56,30"
        href=
        alt="Filled Circle"
        target="_blank"/>
  
      <area
        shape="rect"
        coords="166,32,218,84"
        href=
        alt="filled square"
        target="_blank"/>
    </map>
  </body>
</html>


Output: Here, we have a circle and a square (we use rect as an attribute value even for this).



Last Updated : 22 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads