HTML <area> Tag
The <area> tag defines a clickable area within an image map. It is always nested inside a <map> tag, which provides a container for the area elements. The primary purpose of the <area> tag is to create interactive image maps, enabling users to click on specific regions of an image to navigate to different locations or trigger actions.
Syntax
<area
alt="text"
coords="x1,y1,x2,y2,..."
download="filename"
href="url"
hreflang="language_code"
media="media_query"
ping="url_list"
rel="relationship"
shape="default|rect|circle|poly"
target="_blank|_self|_parent|_top|framename"
type="mime_type"
>
Attributes
| Attribute | Value | Description | ||||
|---|---|---|---|---|---|---|
alt |
text | Specifies alternative text for the area, essential for accessibility. | ||||
coords |
x1,y1,x2,y2,… | Defines the coordinates of the area. The number and meaning of coordinates depends on the shape attribute. | ||||
download |
filename | Specifies that the target will be downloaded when the user clicks on the hyperlink. | ||||
href |
url | Specifies the URL of the linked resource. | ||||
hreflang |
language_code | Specifies the language of the linked document. | ||||
media |
media_query | Specifies what media/device the linked document is optimized for. | ||||
ping |
url_list | Specifies a list of URLs to be notified when the hyperlink is followed. | ||||
rel |
relationship | Specifies the relationship between the current document and the linked resource. | ||||
shape |
default\ |
rect\ |
circle\ |
poly |
Specifies the shape of the area: default covers the entire area, rect defines a rectangular area, circle defines a circular area, poly defines a polygonal area. |
|
target |
_blank\ |
_self\ |
_parent\ |
_top\ |
framename |
Specifies where to open the linked document. |
type |
mime_type | Specifies the MIME type of the linked resource. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Map Example</title>
</head>
<body>
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap" width="600" height="400">
<map name="worldmap">
<area shape="rect" coords="50,50,150,150" href="europe.html" alt="Europe">
<area shape="circle" coords="450,100,50" href="asia.html" alt="Asia">
</map>
</body>
</html>
More Examples
Example 1: Rectangular Area
<img src="room.jpg" alt="Room Image" usemap="#roommap" width="500" height="300">
<map name="roommap">
<area shape="rect" coords="20,20,150,250" href="window.html" alt="Window">
</map>
This example defines a rectangular area within the image, making the window area clickable.
Example 2: Circular Area
<img src="target.jpg" alt="Target Image" usemap="#targetmap" width="400" height="400">
<map name="targetmap">
<area shape="circle" coords="200,200,80" href="bullseye.html" alt="Bullseye">
</map>
Here, a circular area is defined, targeting a specific area of the image, like a bullseye in a target.
Example 3: Polygonal Area
<img src="mountain.jpg" alt="Mountain Image" usemap="#mountainmap" width="600" height="400">
<map name="mountainmap">
<area shape="poly" coords="100,300,250,100,400,300" href="peak.html" alt="Mountain Peak">
</map>
This defines a custom-shaped clickable area following a mountain peak in the image.
Example 4: Using download attribute
<img src="info.jpg" alt="Info Image" usemap="#infomap" width="400" height="300">
<map name="infomap">
<area shape="rect" coords="10,10,100,100" href="data.pdf" download="information_file.pdf" alt="Download data">
</map>
The download attribute allows you to initiate a file download when the user clicks on the area, which is useful for providing resources tied to specific image regions.
Example 5: Multiple Areas and target
<img src="office.jpg" alt="Office" usemap="#officemap" width="600" height="400">
<map name="officemap">
<area shape="rect" coords="50,50,200,200" href="computer.html" alt="Computer" target="_blank">
<area shape="rect" coords="250,50,400,200" href="desk.html" alt="Desk" target="_self">
<area shape="rect" coords="450,50,550,200" href="window.html" alt="Window" target="_parent">
</map>
This shows multiple <area> elements within the same map, each leading to a different destination, with different values for the target attribute to control how the links open.
Browser Support
The <area> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Accessibility: Always provide descriptive
alttext for each<area>to ensure accessibility for screen readers. - Coordinates: The
coordsattribute can be tricky, use tools to generate the coordinates or fine-tune them visually using developer tools. shapeattribute: Choose the right shape for the area; using a polygon for a simple circle is overly complicated, and vice versa.- Complex Shapes: For very complex shapes, consider using SVG instead of traditional image maps.
- Responsive Design: Image maps may not work well on responsive designs; consider using other solutions for smaller screens or adapt image map coordinates based on the screen size.
- Best Practices: Keep image maps simple and use them only when it enhances user interaction. Avoid very complex maps with tiny clickable areas.
- Testing: Test your image maps on various browsers and devices to ensure they work as intended.
- Use a generator: Consider using online image map generators to make the creation process easier. They provide a visual interface to generate the coordinates, which makes this task much more user-friendly.
