The <area> tag in HTML5 is a lesser-known but incredibly useful element, especially when working with image maps. This article is designed for beginners in web development, offering a comprehensive guide to understanding and implementing the <area> tag in your HTML documents.
What is the HTML <map> tag?
The <map> tag in HTML5 defines an image map, a clickable and interactive image with areas that link to different destinations. The <map> element contains a collection of <area> elements that specify the clickable regions of the image map.
Features of the <map> Tag
- Works with
<area>Tags: The<map>tag is used in conjunction with<area>tags, each defining a clickable area on the image. - Requires an ID: The
<map>tag must have a uniqueidattribute, which is then referenced by theusemapattribute of the<img>tag.
What is the HTML <area> Tag?
The <area> tag defines a clickable area within an image map and is always nested inside a <map> element. An image map allows you to create multiple clickable areas (hotspots) on a single image, each linking to different destinations. This is particularly useful for interactive graphics like geographical maps, diagrams, or complex images.
Attributes of the <area> Tag
The <area> tag supports several attributes that define its shape, coordinates, and link properties:
- shape: Specifies the shape of the area. Common values include
rect(rectangle),circle, andpoly(polygon). - coords: Defines the coordinates of the area’s shape in pixels.
- href: Sets the URL to which the area links.
- alt: Provides alternative text for the area (important for accessibility).
- target: Similar to the
<a>tag, it specifies where to open the linked document. - download, media, hreflang, rel, type: These attributes work similarly to their counterparts in the
<a>tag.
Example Code with the <area> Tag
<!DOCTYPE html>
<html>
<head>
<title>Area Tag Example</title>
</head>
<body>
<h1>Interactive Image Map Example</h1>
<img src="planets.jpg" usemap="#planetmap" alt="Planets">
<map name="planetmap">
<area shape="circle" coords="45,45,35" href="mercury.html" alt="Mercury">
<area shape="circle" coords="90,58,35" href="venus.html" alt="Venus">
<area shape="circle" coords="145,45,35" href="earth.html" alt="Earth">
<!-- More areas for other planets -->
</map>
</body>
</html>In this example, an image of the solar system is used with defined clickable areas for each planet. Each <area> has a shape, coordinates, and a link to a corresponding page.
Best Practices
- Use Clear
altTexts: Provide descriptive alternative texts for each area for accessibility purposes. - Validate Coordinates: Ensure that the coordinates match the intended areas on the image.
- Use Responsively: Remember that image maps may not scale well on responsive designs.
Conclusion
The <area> tag, when combined with the <map> and <img> tags offer a powerful way to create interactive images with multiple linkable areas. This can greatly enhance the interactivity and user experience of your web pages. As a developing web designer or developer, experimenting with image maps can open up creative avenues for presenting information in an engaging and interactive format.
