HTML <map> Tag

The HTML <map> tag is used to define an image map, which is a clickable area on an image. Image maps allow specific regions of an image to act as hyperlinks to different destinations.

The <map> tag works in conjunction with the <area> tag to specify the clickable areas within the image.

Example of HTML <map> Tag

A basic example of an image map using the <map> tag is shown below:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Image Map Example</h2>
        <img src="example.jpg" alt="Example Image" usemap="#example-map">

        <map name="example-map">
            <area shape="rect" coords="34,44,270,350" alt="Rectangle" href="https://example.com/rectangle">
            <area shape="circle" coords="150,150,75" alt="Circle" href="https://example.com/circle">
            <area shape="poly" coords="25,25,100,25,100,100,25,100" alt="Polygon" href="https://example.com/polygon">
        </map>
    </body>
</html>

Note: The usemap attribute in the <img> tag links the image to the <map> element by name. The <area> tags within the map define the clickable regions.

Attributes of HTML <map> Tag

The <map> tag supports the following attributes:

  • name: Specifies the name of the image map. This name is referenced by the usemap attribute of the associated <img> tag.

Styling the <map> Tag

The <map> tag is not directly visible and cannot be styled. However, the associated image and clickable areas (<area>) can be styled to improve the user experience.

Advanced Example of HTML <map> Tag

Here is an advanced example where multiple clickable areas are defined for an image:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Advanced Image Map</h2>
        <img src="world-map.jpg" alt="World Map" usemap="#world-map">

        <map name="world-map">
            <area shape="rect" coords="50,50,150,150" alt="North America" href="https://example.com/north-america">
            <area shape="circle" coords="300,300,75" alt="South America" href="https://example.com/south-america">
            <area shape="poly" coords="400,100,450,150,400,200,350,150" alt="Europe" href="https://example.com/europe">
        </map>
    </body>
</html>

Accessibility of HTML <map> Tag

To improve accessibility when using the <map> tag:

  • Include meaningful alt attributes for all <area> elements.
  • Ensure clickable areas have clear visual indicators for users.
  • Provide alternative navigation for users who cannot interact with image maps.