The <area> Tag in HTML
Introduction
The <area> tag in HTML is used to define clickable areas within an image map. These areas can be hyperlinked to different destinations, providing an interactive experience for users. The tag is often used in conjunction with the <map> tag to create complex navigation structures within images.
Example: Creating an Interactive Campus Map
Suppose you have a map of a university campus, and you want to create clickable areas for different buildings, such as the library, cafeteria, and gym. Here’s how you can do it:
<img src="campus-map.jpg" usemap="#campusmap">
<map name="campusmap">
<area shape="rect" coords="100,50,200,150" alt="Library" href="library.html">
<area shape="polygon" coords="300,200,350,250,400,200" alt="Cafeteria" href="cafeteria.html">
<area shape="circle" coords="500,400,50" alt="Gym" href="gym.html">
</map>Explanation
In this example, we have an image of a campus map (campus-map.jpg) and three clickable areas defined within the <map> tag:
- Library: A rectangular area that links to the library page (
library.html). - Cafeteria: A polygon-shaped area that links to the cafeteria page (
cafeteria.html). - Gym: A circular area that links to the gym page (
gym.html).
The coords attribute specifies the coordinates for each shape, and the href attribute sets the target URL for each clickable area.
By using the <area> tag in conjunction with the <map> tag, you can create complex and interactive image maps that enhance the user experience.
Browser Support
The <area> tag is widely supported across modern browsers. Here’s a table summarizing the support:
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Internet Explorer | Yes |
| Edge | Yes |
Attributes
The <area> tag supports various attributes to define the properties of the clickable areas:
| Attribute | Value | Description |
|---|---|---|
alt |
text | Provides alternate text for the area, describing its purpose or content. |
coords |
coordinates | Specifies the coordinates for the shape of the area, defining the clickable region. |
download |
filename | If present, the target will be downloaded when clicked. |
href |
URL | Sets the hyperlink target for the area, linking to a specific URL. |
hreflang |
language_code | Indicates the language of the target URL. |
media |
media query | Defines the media or device for which the target URL is optimized. |
referrerpolicy |
policy | Controls the referrer information sent with the link. |
rel |
relationship | Describes the relationship between the current document and the target URL. |
shape |
shape type | Defines the shape of the area (e.g., “rect”, “circle”, “polygon”). |
target |
framename | Determines where to open the target URL (e.g., “_blank” for a new tab). |
type |
media_type | Specifies the media type of the target URL, if applicable. |
These attributes provide flexibility and control in defining clickable areas within an image map, allowing developers to create interactive and user-friendly navigation structures.
Global and Event Attributes
The <area> tag also supports Global Attributes in HTML and Event Attributes in HTML, allowing for further customization and interactivity.
More Examples
Here’s another example of an image map with clickable areas
<img src="another-image.jpg" usemap="#anothermap">
<map name="anothermap">
<area shape="polygon" coords="145,300,236,145,356,212" alt="Area 3" href="link3.html">
</map>
Default CSS Settings
Most browsers will display the <area> tag with the following default CSS settings:
area {
display: none;
}
Conclusion
The <area> tag offers a powerful way to create interactive images with clickable regions. By understanding its attributes and how to use them, developers can create engaging and user-friendly navigation structures within images.