HTML <area> Tag

An image Map is a list of coordinates relating to a specific Image that allows users to access different web pages by clicking on different areas of an Image.


Example :

  <body >
    <img src="image-map.png" width="396" height="44" alt="webmap" usemap="#webmap" />
    <map name="webmap">
      <area shape="rect" coords="7,7,121,36" href="home.html" alt="Home" />
      <area shape="rect" coords="138,7,254,36" href="about.html" alt="About" />
      <area shape="rect" coords="270,7,387,36" href="contactus.html" alt="Contact Us" />

The < map > tag is used to define a client-side Image Map. Inside this tag, you will specify where the clickable areas are with the HTML < area > tag.

Example :

<map name="webmap">
  <area shape="rect" coords="138,7,254,36" href="home.html">

There are three shapes commonly used in Image Maps, they are :

  • RECT (left, top, right, bottom)
  • CIRCLE (center-x, center-y, radius)
  • POLY (x1, y1, x2, y2, ...)