HTML Element: area

Syntax

1

<map name="map">

2

  <area shape="rect"coords="0, 0, 50, 50" href="page.html">

3

</map>

Example

1

<img src="image.jpg" usemap="#mymap">

2

3

<map name="mymap">

4

  <area shape="rect" coords="0, 0, 50, 50" href="page1.html">

5

  <area shape="rect" coords="50, 0, 100, 50" href="page2.html">

6

  <area shape="rect" coords="0, 50, 50, 100" href="page3.html">

7

  <area shape="rect" coords="50, 50, 100, 100" href="page4.html">

8

</map>

In this example, we have an image with a map named mymap. The map has four areas defined with the <area> element, each with a different shape, coordinates, and URL.

Result

Here’s how we might put an image with four areas to use:

Attributes

The <area> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much effect on some).

• shape: can be set to circle, default, poly, or rect, depending on the shape of the clickable area.
• coords: defines the coordinates of the clickable area (more details below).
• href: specifies the URL that the clickable area should link to.

Other attributes include alt, target, download, ping, rel, and referrerpolicy.

How Does the coords Attribute Work?

The coords attribute is where we define the coordinates of the shape attribute. 

For example, if the shape is rect (a rectangle) as in our demo above, you would define the top-left and bottom-right coordinates of the rectangle. A rectangle with the coordinates 0,0,50,50 would have its top-left corner placed at 0,0 and its bottom-right corner at 50,50:

So that’s rectangles, but for other shapes the coords attributes accepts different values:

• circle: the accepted value is x,y,radius where x,y are the coordinates of the circle center, followed by the radius.
• poly: the accepted value is x1,y1,x2,y2,..,xn,yn where the pairs dictate the points along the edges of the polygon. The first and last coordinate pairs are expected to be the same, but if that’s not the case the browser will add a last value to close the shape.

Content

The <area> element is often used in conjunction with the <img> element, but it can also be used with other elements such as <object> and <canvas>. The element can be used when phrasing content is expected, but only if there is a map element ancestor.

Did You Know?

• The <area> element was first introduced in HTML 3.2, which was released way back in 1997!
• No end tag is necessary when authoring an <area> tag.

Learn More

• Official W3C specification <area>

• 

  HTML & CSS for Beginners (MEGA Free Course!)

  

  Adi Purdila

  08 Sep 2022
• 

  HTML (Hypertext Markup Language)

  

  Ian Yates

  23 May 2023