Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
HTML, the foundational language for creating web pages, offers a variety of elements to structure and present content on the web. Among these elements is the <area> tag, an essential component for creating image maps. Image maps are images with clickable areas that function as hyperlinks. This article provides an in-depth look at the <area> tag, its attributes, and its usage with a practical example.
What is the <area> Tag?
The <area> tag defines a clickable area within an image map and is always nested inside a <map> element. The <map> element, in turn, is associated with an <img> element using the usemap attribute. The <area> tag does not render anything visible on the page itself. Instead, it specifies the regions of an image that are interactive and link to other documents or parts of the same document.
Attributes of the <area> Tag
The <area> tag supports several attributes that define its shape, coordinates, hyperlink, and more. Key attributes include:
shape: Specifies the shape of the area. Common values arerectfor rectangle,circlefor circle, andpolyfor polygon.coords: Defines the coordinates of the area’s shape in pixels. The format of the coordinates depends on the shape.href: Indicates the hyperlink target URL.alt: Provides alternative text for the area, improving accessibility.target: Determines how the linked document will be displayed when the area is clicked.
Example of Using the <area> Tag
Let’s consider an example where we create an image map with multiple clickable areas.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<img src="example-map.jpg" usemap="#image-map" alt="Example Image Map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" alt="Rectangle Area" href="https://example.com/rect" target="_blank">
<area shape="circle" coords="450,300,45" alt="Circle Area" href="https://example.com/circle" target="_blank">
<area shape="poly" coords="500,60,620,125,500,190" alt="Polygon Area" href="https://example.com/poly" target="_blank">
</map>
</body>
</html>Explanation
In this example, we have an image (example-map.jpg) with three defined clickable areas. The usemap attribute of the <img> element links it to a <map> element with the name “image-map”. Inside the <map> element, there are three <area> elements, each specifying a different shape and coordinates:
- A rectangular area (
shape="rect") with coordinates34,44,270,350. - A circular area (
shape="circle") with coordinates450,300,45(center x, center y, radius). - A polygonal area (
shape="poly") with coordinates500,60,620,125,500,190.
Each area has its href attribute set to a different URL, which will be navigated to when the area is clicked. The alt attribute provides alternative text for each area, and the target="_blank" attribute ensures that the linked URL opens in a new browser tab.
Conclusion
The <area> tag is a powerful element for creating interactive images with multiple clickable areas, enhancing the user experience on web pages. By understanding its attributes and usage, web developers can effectively implement image maps to direct users to different locations, both within and outside their website. Remember, the success of using the <area> tag lies in the careful planning of image maps and the precise definition of coordinates for the desired clickable areas.
