HTML <map> Tag

The HTML <map> tag is used to define an image map, which allows specific areas of an image to be linked to different destinations. When used in conjunction with the <area> tag, it enables developers to create clickable regions on an image, making it interactive and more engaging for users. Image maps are particularly useful for creating clickable interfaces, diagrams, or geographic maps where different parts of the image lead to distinct URLs or actions.

The <map> tag is a powerful tool for improving user experience by allowing multiple links on a single image, providing a visually appealing and functional layout.

Syntax of the <map> Tag

html
<map name="mapName">
    <area shape="rect" coords="x1,y1,x2,y2" href="URL" alt="Description">
</map>
<img src="image.jpg" usemap="#mapName" alt="Example Image">
  • name: The name attribute of the <map> tag is used to associate the map with an image.
  • usemap: The usemap attribute of the <img> tag references the map by its name, linking the image to the map regions defined by <area> tags.

Attributes of the <map> Tag

The <map> tag itself doesn't have many specific attributes, but it works in conjunction with the <area> tag, which allows you to define clickable regions on the image. Below are the important attributes of the <area> tag, often used with <map>:

AttributeDescription
shapeDefines the shape of the clickable area (rect, circle, or poly).
coordsSpecifies the coordinates that define the clickable area.
hrefSpecifies the URL where the user will be directed when clicking.
altProvides alternative text for accessibility and SEO purposes.
targetSpecifies where to open the linked document (_self, _blank, etc.).

Examples of HTML <map> Tag

Example 1: Simple Image Map with Rectangular Clickable Area

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Image Map</title>
</head>
<body>
    <img src="example.jpg" alt="Example Image" usemap="#examplemap">
    
    <map name="examplemap">
        <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Clickable Area">
    </map>
</body>
</html>

In this example, a rectangular clickable region is defined on the image. When users click within the specified coordinates, they will be directed to the linked page.

Example 2: Image Map with Multiple Areas

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map with Multiple Areas</title>
</head>
<body>
    <img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
    
    <map name="worldmap">
        <area shape="rect" coords="100,50,200,150" href="https://example.com/northamerica" alt="North America">
        <area shape="circle" coords="400,300,50" href="https://example.com/europe" alt="Europe">
        <area shape="poly" coords="300,200,350,250,400,200" href="https://example.com/asia" alt="Asia">
    </map>
</body>
</html>

This example showcases a more complex image map with multiple clickable areas, each with a different shape (rectangular, circular, and polygonal). Clicking on each area leads the user to different URLs.

FAQs About HTML <map> Tag

Q1: What is the purpose of the HTML <map> tag?
A: The <map> tag is used to define an image map, allowing specific areas of an image to be clickable and linked to different destinations or actions.

Q2: Can the <map> tag be used with any image?
A: Yes, the <map> tag can be used with any image, as long as the image has the usemap attribute that links to the defined map regions.

Q3: Does the <map> tag affect SEO?
A: Yes, when using the <map> tag, providing descriptive alt attributes for each clickable area helps search engines understand the content better, improving accessibility and SEO.

Q4: What shapes can be used in the <area> tag within an image map?
A: The <area> tag supports rect (rectangle), circle, and poly (polygon) shapes for defining clickable areas on an image.

Q5: Is the <map> tag supported in all browsers?
A: Yes, the <map> tag is supported by all major browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles