00:00:00

<map> and <area> Tags in HTML5

The map and area tags in HTML5 are used to create image maps. An image map is a graphic image where a user can click on specific areas to be linked to other pages or resources.

The map tag is used to define an image map and its clickable areas. The map tag is a container for the area elements that define the individual clickable areas. The map tag requires a name attribute, which is used to reference the map from the img tag.

The area tag is used within a map tag to define the individual clickable areas. The area tag requires a shape attribute to define the shape of the clickable area. The shape attribute can be set to rect, circle, or poly. The rect shape creates a rectangular clickable area, the circle shape creates a circular clickable area, and the poly shape creates a polygonal clickable area.

The <map> element is used to define the image map and assign it a name using the name attribute. This name is then referenced by the usemap attribute in the <img> element, which displays the actual image.

Here's an example of using the <map> element:

<img src="map.jpg" alt="Map of the world" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,82,126" href="africa.html">
  <area shape="circle" coords="90,58,3" href="europe.html">
  <area shape="poly" coords="50,100,100,100,100,60,50,60" href="asia.html">
</map>

How It Works?

The <area> element is used to define each clickable region within the image map. The shape attribute is used to specify the shape of the region, which can be a rectangle, circle, or polygon. The coords attribute is used to specify the coordinates of the region.

In the example above, the first <area> element defines a rectangular region with its top-left corner at (0, 0) and its bottom-right corner at (82, 126). The second <area> element defines a circular region with its center at (90, 58) and a radius of 3 units. The third <area> element defines a polygonal region with three vertices at (50, 100), (100, 100), and (100, 60).

By clicking on different regions in the image, the user will be taken to the corresponding web page or URL.

The use of image maps in HTML5 is not as common as it used to be in the past, as there are other ways of creating clickable images, such as using CSS and JavaScript. However, image maps can still be useful in some situations, such as creating navigation menus or linking to different sections within a single web page.

It's important to note that the <map> and <area> elements are not supported by all browsers, so it's a good idea to use them in conjunction with alternative methods of navigation to ensure maximum compatibility.

In conclusion, the <map> and <area> elements in HTML5 provide a way to create image maps, which are images divided into clickable regions. Although not as widely used as other methods of creating clickable images, image maps can still be useful in certain situations.