<map>タグは、イメージマップを作成する際に使用する。イメージマップとは、画像や外部リソースの特定領域に、四角形・円形・多角形などの形状でリンクを設定したものである。一般的には、一枚の画像に複数のリンクを設定する場合などによく利用されている。
イメージマップを作成するには、 <map>～<map>の中に、子要素として<area>を配置する。<area>のhref属性でリンク先URLを、shape属性でリンク領域の形状を、coords属性でリンク領域の座標を指定する。
<map>のname属性は、イメージマップに名前を付けるための必須属性である。<map>のname属性の値と、<img>や<object>のusemap属性の値を一致させることで、イメージマップと画像や外部リソースを関連づける。<map>のname属性の値には、スペース文字を含めてはいけない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ImageMapサンプル</title>
</head>
<body>
<map name="sample">
<area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
<area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
<area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>
<img usemap="#sample" src="image.jpg" alt="Image"/>
</body>
</html>