html
  1. html-map-tag
PreviousNext

HTML <map> Tag

  • The HTML <map> tag is used to define an image-map in a web page.
  • An image-map is an image that has been divided into clickable regions or hotspots.
  • In other words, <map> tag provides links for a particular area of an image.

Syntax

<map name="mapname">
  <area shape="shape" coords="coordinates" href="link">
  <area shape="shape" coords="coordinates" href="link">
  ...
</map>

Example

<img src="https://static.additionalsheet.com/images//html/area.png" alt="" width="300" height="119"
    usemap="#shapemap" />

<map name="shapemap">
    <!-- area tag contained image. -->
    <area shape="poly" coords="59,31,28,83,91,83" href="https://static.additionalsheet.com/images//html/triangle.png"
        alt="Triangle">

    <area shape="circle" coords="155,56,26" href="https://static.additionalsheet.com/images//html/circle.png"
        alt="Circle">

    <area shape="rect" coords="224,30,276,82" href="https://static.additionalsheet.com/images//html/square.png"
        alt="Square">
</map>
Try Playground

An image with clickable regions or hotspots.

Explanation

  • The <map> tag is used with an <img> tag to create an image map.
  • The name attribute is used to specify a name for the map.
  • The <area> tag is used to define an area in the image map.
  • The shape attribute is used to define the shape of the clickable area (rect, circle, or poly).
  • The coords attribute is used to define the coordinates of the clickable area.
  • The href attribute is used to define the URL that the area links to.

Use

The HTML <map> tag is mainly used to create image maps that have clickable regions or hotspots. This is useful for creating clickable maps, navigation menus, and image galleries.

Important Points

  • The <map> tag must be used in conjunction with an <img> tag.
  • The name attribute must be specified in the <map> tag.
  • The shape and coords attributes must be specified in the <area> tag.
  • The href attribute must be specified in the <area> tag.

Summary

  • The HTML <map> tag is used to define an image-map in a web page.
  • The syntax for the <map> tag is <map name="mapname">...</map>.
  • The <map> tag must be used in conjunction with an <img> tag.
  • The <area> tag is used to define clickable areas in the image map.
  • The shape and coords attributes must be specified in the <area> tag.
  • The href attribute is used to define the URL that the area links to.
<main> Tag<mark> Tag
Published on: