Table of contents

HTML <map> Tag

What is HTML <map> Tag?

The HTML map tag is used to define an image map. An image map is an image with clickable areas that lead to different links or actions. The map tag works together with the area tag to create these clickable regions. Each clickable region is defined using the area tag inside the map tag.

This tag is important because it allows developers to make images interactive without using multiple separate image links. It is often used in product images, diagrams, and infographics where different parts of the same image need to link to different destinations. The map tag itself does not display anything but serves as a container for the area tags.

Syntax of the HTML <map> Tag

plaintext
<img src="image.jpg" usemap="#mapname">
<map name="mapname">
  <area shape="shape_type" coords="values" href="URL" alt="description">
</map>

The map tag must have a name attribute. The image element that refers to it uses the usemap attribute, starting with a hash (#) followed by the map name. The area tags inside define the clickable regions on the image.

Examples of HTML <map> Tag

Example 1: Basic HTML Map Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <img src="world-map.jpg" usemap="#worldmap">
  <map name="worldmap">
    <area shape="rect" coords="40,50,160,150" href="https://www.scholar247.com/asia" alt="Asia">
    <area shape="circle" coords="300,100,40" href="https://www.scholar247.com/europe" alt="Europe">
  </map>

</body>
</html>

In this basic example, two clickable areas are defined within the world map image. One rectangular area links to the Asia page and one circular area links to the Europe page.

Example 2: SEO Optimized HTML Map Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <img src="car-diagram.jpg" usemap="#carmap">
  <map name="carmap">
  <area shape="rect" coords="60,60,200,150" href="https://www.scholar247.com/engine-maintenance" alt="Car Engine Maintenance Service - Scholar247">
  <area shape="circle" coords="320,220,50" href="https://www.scholar247.com/tire-replacement" alt="Car Tire Replacement Cost - Scholar247">
  </map>

</body>
</html>

This SEO-friendly example shows how to link specific parts of a car image to related service pages. Descriptive alt text with relevant keywords helps search engines understand the purpose of each clickable area, improving both SEO and accessibility.

Attributes of the HTML <map> Tag

The map tag supports only one key attribute:

• name: Assigns a unique name to the map so that the image element can reference it using the usemap attribute.

All clickable regions must be defined inside the map tag using the area tags.

Best Practices for HTML <map> Tag

• Always include descriptive alt text in each area tag for better SEO and accessibility.
• Keep map names unique on each webpage to prevent conflicts.
• Ensure clickable areas are correctly aligned and sized for both desktop and mobile.
• Use relevant and keyword-rich URLs to improve SEO performance.
• Avoid using too many clickable regions to maintain clarity and user focus.

FAQs About the HTML <map> Tag

What is the purpose of the HTML map tag?

The HTML map tag defines an image map, which allows different parts of an image to be clickable and linked to different destinations.

Can the map tag be used alone without the area tag?

No, the map tag must contain one or more area tags. Without area tags, it will not create any clickable regions.

Is the map tag required for every image?

No, the map tag is only required when you want to create interactive or clickable areas within a single image.

Does the HTML map tag improve SEO?

Yes. When combined with well-written alt text and meaningful links, image maps can improve SEO and accessibility.

Can I use multiple map tags on one page?

Yes, you can use multiple map tags on a single page, but each must have a unique name so the image elements can reference them correctly.

HTML

Related Articles