w3resource

HTML map tag and element

1. HTML map element defines a client side image map.

2. map element starts with <map> tag and does not have any end tag.

Syntax

<map ....  / >

Category

HTML map element is a part of HTML object, image and applet.

Whether both start and end tags are required

The start tag is required but end tag is forbidden.

Can contain

HTML map element can contain one or more area or Block-level elements.

Can reside within

HTML map element can reside within Inline elements and Block-level elements.

Attributes

shape, coords, nohref, usemap.

Identifiers

id, class.

language information and text direction

lang, dir.

Title

Title.

Style

Style.

Submitting objects with forms

name.

Alternate text

alt.

Anchor reference

href.

Frame target information

target.

Tabbing navigation

tabindex.

Access keys

accesskey.

Image maps

shape.

Events

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur.

alternate text

alt.

client side image maps

ismap, usemap.

visual presentation

align, width, height.

Supported doctypes

HTML 4.01 Strict, HTML 4.01 Transitional, and HTML 4.01 Frameset.

Example of using HTML map element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>html map tag example</title>
</head>
<body>
<img src="html-map-tag.gif" alt="name example " 308" height="190" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="8,5,100,77" href="../../mysql/mysql-tutorials.php" target="_blank" alt="mysql tutorial">
<area shape="circle" coords="155,93,59" href="../../php/php-home.php" target="_blank" alt="php tutorial">
<area shape="rect" coords="197,136,306,188" href="../../sql/sql-tutorials.php" alt="sql tutorials">
</map>
</body>
</html>

Result

html map element

View this example in a separate browser window

HTML map tag example.

Previous: HTML img tag and element
Next: HTML area tag and element

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.