HTMLCSSJavaScript

<area>

Definition

The HTML area element is a part of an image map, and is used to define a clickable area on an image. It can be used to create hyperlinks within a single image that can be used to navigate to different pages or sections on a website.

Examples

<!DOCTYPE html>
<html>
<head>
	<title>Example of the HTML area element</title>
</head>
<body>
	<h1>Clickable Image Map</h1>
	<p>Click on the different shapes in the image below to navigate to different pages:</p>

	<img src="image.jpg" alt="Image map with clickable areas" usemap="##map">

	<map name="map">
		<area shape="rect" coords="0,0,150,150" href="page1.html" alt="Rectangle" title="Page 1">
		<area shape="circle" coords="175,75,50" href="page2.html" alt="Circle" title="Page 2">
		<area shape="poly" coords="275,0,325,50,375,0,400,100,375,150,325,100,275,150" href="page3.html" alt="Triangle" title="Page 3">
	</map>
</body>
</html>

Attributes

The area element has several attributes that can be used to define its properties, including alt, coords, href, shape, and title.

AttributeDescriptionDeprecated
altSpecifies an alternative text for the areaNo
coordsSpecifies the coordinates of the clickable areaNo
hrefSpecifies the destination URL for the areaNo
shapeSpecifies the shape of the clickable areaNo
titleSpecifies a title for the areaNo

Best Practices

Best practices for using the area element include:

  • Using the alt attribute to provide a text alternative for the area
  • Providing a meaningful title attribute for the area
  • Using a logical shape attribute to define the clickable area
  • Specifying the coords attribute to define the coordinates of the clickable area
  • Using a valid href attribute to provide the link for the area

Accessibility Considerations

When using the area element, it is important to consider accessibility. This includes providing alternative text for the area using the alt attribute, and ensuring that the shape and coords attributes are properly defined to create a logical and easily clickable area.

Browser Compatibility

Browser compatibility for the area element varies, as not all browsers support the use of image maps. Some commonly used browsers that support the area element include:

ChromeFirefoxMicrosoft EdgeSafariInternet Explorer
YesYesYesYesNo
Next
Domain names