HTML Web development

HTML map and area tags

HTML map and area tags

The HTML <map> element is used to specify an image map. An image map is an image with clickable areas.

The HTML <map> tag contains a number of HTML <area> tags, that specify the clickable areas in the image map.


<!DOCTYPE html>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="">
  <area shape="circle" coords="337,300,44" alt="coffee" href="">



Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Note: The usemap attribute in <img> is linked with the <map> element’s name attribute, and creates a connection between the image and the map.

The HTML <area> element specifies an area inside an image map.


alt (value- text) -defines an alternate text for the area.


<area alt="text"> 

coords (value- coordinates) – defines the coordinates of the area.


<area coords="value"> 

x1,y1,x2,y2 – defines the coordinates of the top-left and bottom-right corner (shape=”rect”).

x,y,radius – defines the coordinates of the circle center and the radius (shape=”circle”).

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

download (value- filename) – defines that the target will be downloaded when a user clicks on the hyperlink.


<area download="filename"> 

href (value- URL) – defines the hyperlink target for the area.


<area href="URL"> 

media (value- media query) – defines what device the target URL is optimized for.


<area media="value"> 

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send with the link.


<area referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">

rel (value- alternate/ author/ bookmark/ help/ license/ next/ nofollow/ noreferrer/ prefetch/ prev/ search/ tag) – defines the relationship between the current document and the target URL.


<area rel="value"> 

shape (value- default/ rect/ circle/ poly) – defines the shape of the area.


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

default – defines the entire region.

rect – specifies a rectangular region.

circle – specifies a circular region.

poly – specifies a polygonal region.

target (value- _blank/ _parent/ _self/ _top/ framename) – defines where to open the target URL.


<area target="_blank|_self|_parent|_top|framename"> 

type (value- media_type) – defines the media type of the target URL.


<area type="media_type"> 

Enjoy coding!