You are currently viewing HTML image & map Tag | Lesson 17 HTML Tutorial
HTML map Tag Image

HTML image & map Tag | Lesson 17 HTML Tutorial

in this lesson you will learn how to create image in your web page and how to edit it’s size (width and height) also you will learn how to use map html tag with images.

If You Prefer Visual Explain, here is the video:

HTML map Video

Image Maps

The <map> tag defines an image-map. An image-map is an image with clickable areas. In the image below, click on the loading circle or the loading rectangle :


 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
    <area shape="circle" target="_blank" coords="150,70,44" alt="circle" href="">
<area shape="rect" target="_blank" coords="50,160,250,190" alt="rectangle" href="">


map example image
circle rectangle
map example image

The name attribute of the <map> tag is associated with the <img>‘s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> tags, that define the clickable areas in the image-map.

This HTML map Tag lesson is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL:


Twitter: http://


Facebook: http://


Leave a Reply