Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
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.
<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.
<area>
TagThe <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 are rect
for rectangle, circle
for circle, and poly
for 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.<area>
TagLet’s consider an example where we create an image map with multiple clickable areas.
<!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>
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:
shape="rect"
) with coordinates 34,44,270,350
.shape="circle"
) with coordinates 450,300,45
(center x, center y, radius).shape="poly"
) with coordinates 500,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.
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.