HTML <map> Tag

The map tag in HTML is used to create an interactive picture map (or hotspots).

The <area> element is used to generate clickable areas within the <map> tag, and each clickable area can have a hyperlink associated with it.

The <area> element is another frequent name for this tag.

Syntax

<map><area coords="___, ___, __, ___" href="__url__"></map>

Example

<!DOCTYPE html>
<html>
<body>

<p>Go to a new page and read more about the topic by clicking on the Triangle, Circle, or Square:</p>

<img src="https://webtutor.dev/images/shape.jpg" usemap="#image-map">

<map name="image-map">
	<area target="_blank" alt="poly" title="poly" href="https://webtutor.dev/html/html-introduction" coords="151,175,94,80,41,174" shape="poly">
	<area target="_blank" alt="circle" title="circle" href="https://webtutor.dev/html/html-map-tag" coords="258,125,50" shape="circle">
	<area target="_blank" alt="rect" title="rect" href="https://webtutor.dev/html/html-a-tag" coords="362,74,466,178" shape="rect">
</map>

</body>
</html>

Preview

Attributes

Attribute	Value	Description
name	mapname	Required. The map's name is specified here.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
<map>	Yes	Yes	Yes	Yes	Yes

<main>

<mark>

HTML <map> Tag

Syntax

Example

Attributes

Supported Browsers

Links

Tutorials

Connect with us