HTML <area> Tag
Definition of the <area> tag.
The <area> tag the HTML is accompanied by the <map> tag, which defines the clickable parts of an image, or an image map. Though a clickable part or area may be a circle, rectangle, or polygon, these coordinates can be clickable to go to a particular URL.
For example, if you are displaying a world map image on your web page and you are looking forward to making different countries clickable so that the user can have a page dedicated to each country, then instead of placing text links around the map, you can create an image map, specifying the areas where each country can be clicked.
The Basics of Using the <area> Tag
The <area> tag is part of an image map, which is defined by the <map> tag. Here’s a basic example:
<img src="world-map.jpg" usemap="#worldmap" alt="World Map">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA">
<area shape="circle" coords="150,150,60" href="canada.html" alt="Canada">
<area shape="poly" coords="200,150,300,150,250,250" href="brazil.html" alt="Brazil">
</map>Breakdown of the Code:
<img src="image.jpg" usemap="#image-map" alt="Example Image">
This line shows the image on the page.usemap="#image-map"tells the browser that this image will have clickable areas defined by a map named “image-map”.alt="Example Image"is the alternate text description for the image if it can’t be displayed.
<map name="image-map">
The<map>tag wraps all the areas that will be clickable. Thename="image-map"part is important because it links the image to the map.<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Description" title="Click here for more">
This defines the first clickable area on the image.shape="rect"specifies that this area is rectangular.coords="34,44,270,350"defines the coordinates of the rectangle (starting point x, starting point y, ending point x, ending point y).href="https://www.example.com"specifies where users will go when they click that area.alt="Description"provides text for screen readers and if the image can’t be displayed.title="Click here for more"is a tooltip that appears when a user hovers over the area.
<area shape="circle" coords="500,150,100" href="https://www.anotherexample.com" alt="Another Description" title="Visit another site">
This defines a circular clickable area on the image.shape="circle"specifies that the clickable region will be circular.coords="500,150,100"specifies the center of the circle (500, 150) and the radius (100).- The
href,alt, andtitleattributes work the same as above.
A Simple Example of an Image Map:
Imagine you have a map image and want to link different cities to their respective pages. Here’s how it could look:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Image Map</title>
</head>
<body>
<h1>Click on a city!</h1>
<img src="city_map.jpg" usemap="#city-map" alt="City Map">
<map name="city-map">
<!-- Rectangle for New York -->
<area shape="rect" coords="50,50,150,150" href="https://www.nyc.com" alt="New York" title="Click for New York">
<!-- Circle for Los Angeles -->
<area shape="circle" coords="300,200,75" href="https://www.lacity.org" alt="Los Angeles" title="Click for Los Angeles">
<!-- Polygon for Chicago -->
<area shape="poly" coords="200,300,250,350,300,300,350,350,200,400" href="https://www.cityofchicago.org" alt="Chicago" title="Click for Chicago">
</map>
</body>
</html>
Why use an image map?
- Enhanced Interactivity: Image maps add clickable regions, which makes your image more interactive and engaging for users.
- Link Multiple Spots: They’re perfect for use cases like maps, diagrams, or product images, where you want to link to different pages based on where users click within the image.
- Improved Accessibility: Including proper alt text and other attributes ensures a better experience for users with disabilities, helping screen readers and other assistive technologies.
Things to remember:
- Check Your Coordinates: It’s important to ensure that the coordinates are accurate, as incorrect ones will make the designated areas unclickable.
- Consider Image Resizing: Image maps work best with images that don’t resize, as resizing (especially on mobile) can cause the clickable areas to become misaligned with the image regions.