Navigating HTML5: The “area” and “map” Tag Explained

3 min read

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 unique id attribute, which is then referenced by the usemap attribute 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:

  1. shape: Specifies the shape of the area. Common values include rect (rectangle), circle, and poly (polygon).
  2. coords: Defines the coordinates of the area’s shape in pixels.
  3. href: Sets the URL to which the area links.
  4. alt: Provides alternative text for the area (important for accessibility).
  5. target: Similar to the <a> tag, it specifies where to open the linked document.
  6. download, media, hreflang, rel, type: These attributes work similarly to their counterparts in the <a> tag.

Example Code with the <area> Tag

<!DOCTYPE html>
    <title>Area Tag Example</title>

    <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 -->


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 alt Texts: 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.


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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Carlos Baez

Subscribe now to keep reading and get access to the full archive.

Continue Reading