Understanding the HTML Tag: A Comprehensive Guide

The HTML <area> tag is a powerful tool that allows you to create clickable areas on an image map. This tutorial will walk you through its usage, attributes and provide examples for better understanding.

What is the HTML <area> Tag?

The <area> tag in HTML defines an area within an image map that has predefined clickable areas. It’s always nested inside the <map> tags and works only when associated with images.

Main Attributes of the <area> Tag

• Shape: This attribute specifies the shape of the clickable area. It can be “default”, “rect” (for rectangle), “circle”, or “poly” (for polygon).
• Coords: This attribute specifies the coordinates of the clickable area. The number and meaning of these values depend on the shape defined.
• Href:This attribute provides a link where users will be directed when they click on this specific area of your image map.

An Example Usage of The <area>

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="example.html">
</map>

<img src="workplace.jpg" usemap="#workmap">

In this example, we have created a rectangular clickable area within our image ‘workplace.jpg’. When clicked, it will direct users to ‘example.html’.

Conclusion

The HTML <area> tag is a versatile tool that can enhance the interactivity of your website. It allows you to create specific clickable areas on an image, each leading to different destinations. Remember, practice makes perfect! So, don’t hesitate to experiment with this tag and its attributes.