HTML5 map tag, Example of� <map> tag in html5

In this section we will discuss the use of <map> tag and about its implementation in the html document.

In this section we will discuss the use of <map> tag and about its implementation in the html document.

HTML5 map tag, Example of <map> tag in html5

In this section we will discuss the use of <map> tag and about its implementation in the html document. The <map> tag is used for defining an image map. Image map is the image divided in to clickable areas or we can say mouse sensitive areas. It means when we click on those areas in the image map it sends to another page or resource. It works just like a hyperlink works in the text. The <map> tag is used in conjuction with <img> tag. The <area> tag is used only within the <map> tag, the regions within image map is mouse sensitive.

Declaration Syntax:

The syntax for the <map> tag is as follows.

<map name="value">Areas Definition </map>

Attribute of <map> tag.

In the <map> tag there are only one specific attribute given below. some times programmer use "id" attribute, Have same meaning.

name="value" The value of the attribute is the name assingned to the map.

Example_map_tag.html.

<!DOCTYPE html >
<html>
<head>
  <title> Example of map Tag </title>
</head>
<body>
  <img src="comp.gif" width="350" height="299"  usemap="#computermap" />
     <map name="computermap">
     <area  coords="16, 78, 123, 242"  href="cpu.gif" shape="rect" alt="cpu"/>
     <area  coords="138, 90, 303, 239"  href="monitor.gif" shape="rect" alt="monitor"/>
     <area  coords="70, 244, 324, 290" href="keyboard.gif" shape="rect" alt="keyboard"/ >
    </map>
</body>
</html>

Output: For getting output, please click the image and then any part of the image.

Download This Example.

Difference between HTML5 and HTML4

There is no difference from html4.

Ads