The <area> HTML tag is used to define clickable regions within an image map, allowing users to interact with specific areas of an image. This tag is always used in conjunction with the <map> element, which defines the overall image map. The <area> element itself is a void element, meaning it does not have a closing tag. It is particularly useful for creating interactive images where different sections can link to various destinations or perform specific actions when clicked. By utilizing the <area> tag, developers can enhance the interactivity of images on a webpage.
The <area> tag requires certain attributes to function effectively. The shape attribute specifies the geometric shape of the clickable area, such as a rectangle, circle, or polygon. The coords attribute provides the coordinates for the shape, defining its size and position within the image. Additionally, the href attribute is used to specify the URL or resource that the area links to. Here is an example of how the <area> tag can be used within an image map:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>Valid Attributes for <area>
| Attribute | Description |
|---|---|
| alt | Provides alternative text for the area, useful for accessibility. |
| coords | Specifies the coordinates for the shape of the area. |
| download | Indicates that the target should be downloaded rather than displayed. |
| href | Specifies the URL or resource the area links to. |
| hreflang | Specifies the language of the linked resource. |
| media | Specifies the media type for which the linked resource is optimized. |
| nohref | Specifies that an area should not have a hyperlink. |
| rel | Defines the relationship between the current document and the linked resource. |
| shape | Defines the shape of the clickable area (e.g., rect, circle, poly). |
| target | Specifies where to open the linked document (e.g., _blank for new tab). |
| type | Specifies the MIME type of the target URL. |
In summary, the <area> tag is a powerful tool for creating interactive and clickable areas within images, enhancing user engagement and navigation on a webpage. It is essential for developers to use this tag in conjunction with the <map> element to create effective image maps.