HTML5 <map> Tag

The HTML <map> tag is used with <area> elements to define an image map (a clickable link area).

The only content permitted inside this element is transparent element i.e., any element whose tags can be removed from valid HTML while still keeping the HTML valid. Both the starting and ending tag are mandatory for this element. The parent of the <map> tag can be any element that accepts phrasing content.

The following style is applied to this element by default:

map {
  display: inline;
}

Here is an example of using this tag:

<map name="circular">
  <area shape="circle" coords="85,85,75" href="link/to/left/circle.php">
  <area shape="circle" coords="285,85,75" href="link/to/right/circle.php">
</map>
<img usemap="#circular" src="path/to/image.jpg" alt="leaves">

Attributes

name

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

See the Pen HTML map Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <map> element on MDN.
  2. You can also read the HTML <map> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top