HTML Map Tag Tutorial

Browser Support

The HTML map element serves two purposes. It's a container element for the <area> tags. The area tags identify the coordinates that define the clickable areas of an image and bind image map hot spots to specific web addresses.

And, with the name and id attributes, ties the image to the graphic that will be the image map.

There is an example image map below. Here is the code used to create the image map:

The graphic to the right is the image map for the above code sample. You can try the links if you like, there's one for each ebook. The ebooks are free if you want to grab them for yourself. The links will open in a new window or tab, depending on your browser.

The area tags are always nested between the <map> ... </map> tags.

The usemap's attribute value in the <img> tag must match the value used in the <map> name attribute and id attribute. This is what creates a relationship between the image and the map code.

Based on your interest in this tutorial, you may also be interested in these related pages:

Area Tag
How to Make Image Maps (eBook - one of three for FREE!)

This concludes the HTML Map Tag Tutorial.

Back | HTML Tag Chart | HTML Index | Web Design Tutorials

If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]