Map and Area tag in HTML | Explanation and Usage

This article is for all the HTML lovers who want to build a strong base in web development. Today we will learn a very useful HTML tag that can be defined for any image separately known as Map and area tag. Let’s start without wasting time.

<area> tag

The <area> tag defines an area inside an image map. An image map is an image with clickable areas. The <area> tag always used inside a <map> tag.

Code
<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="https://cdn.pixabay.com/photo/2014/05/02/21/50/laptop-336378__340.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://cdn.pixabay.com/photo/2014/09/24/14/29/mac-459196_960_720.jpg">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://cdn.pixabay.com/photo/2014/08/05/10/30/iphone-410324_960_720.jpg">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_960_720.jpg">
</map>

</body>
</html>
Output

The image below is the output of the above code. In this, the laptop, the coffee cup, and the phone are the clickable objects. The area of the laptop, coffee cup, and the phone that are clickable is decided by the <area> tag.

map and area tag
Image obtained by running the above code

Let’s discuss the tags and attributes used in the above code.

  • <img>: <img> tag is used to display the above image.
    • src attribute contains the image address of the above image.
    • alt attribute has the alternate name of the image if the image failed to load.
    • usemap attribute is associated with the <map> name and the use of usemap in <img> creates a relationship between <map> and <image>.
    • width and height are the basic attributes to define the width and height of an image.
  • <map>: <map> tag is used to form an image map.
    • name attribute value and usemap value of image attribute must have to be the same to form an image map. An image map is an image with clickable areas.
  • <area>: <area> tags defines the area in image map to be clickable.
    • shape attribute specifies the shape of the area. the shape attribute can have 4 values i.e rect, circle, poly, and default.
    • coords attribute decides the 3 parameters for the shape we provided in the shape attribute i.e shape, size, and the placement of an area. The coords attribute and the shape attribute are always used together.
    • alt attribute is the same as we discussed above for the <img> tag.
    • href attribute is the same as we discussed above for the <img> tag.

Attributes of <area>

alt

<!DOCTYPE html>
<html>
<body>

<h1>The area href attribute</h1>

<p>Click on the butterfly or the grass to watch it closer:</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map id="butterflymap" name="butterflymap">
<area shape="rect" coords="0,0,82,126" alt="buttefly" href="https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg">
<area shape="circle" coords="123,58,36" alt="grass" href="https://cdn.pixabay.com/photo/2017/06/11/02/05/summer-2391348_960_720.jpg">

</map>

</body>
</html>
  • Syntax: <area alt=””>
  • The value of this attribute is a text. Here, the alt attribute specifies the alternate text to the area in the image map. The alt attribute can be only used when the href is present.
  • The alt attribute provides the alternate text for the image user want to see but can’t see because of some network issue or any technical fault.

coords

<!DOCTYPE html>
<html>
<body>

<h1>The area href attribute</h1>

<p>Click on the butterfly or the grass to watch it closer:</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map id="butterflymap" name="butterflymap">
<area shape="rect" coords="0,0,82,126" alt="buttefly" href="https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg">
<area shape="circle" coords="123,58,36" alt="grass" href="https://cdn.pixabay.com/photo/2017/06/11/02/05/summer-2391348_960_720.jpg">

</map>

</body>
</html>

Syntax: <area coords=”value”>

  • The value of this attribute are coordinates. Here, the coords attribute specifies the coordinates of the area in the image map. The coords attributed can only be used if the shape attribute is present.
  • The coordinates of the top-left corner are 0,0.
  • The value of coords are of 3 types:
    • x1, x2, y1, y2: Specify the top-left and bottom-right corner of the rectangle.
    • x, y, radius: Specify the coordinates of the center of the circle and the radius.
    • x1, y1, x2, y2,….., xn, yn: Specify the edges of the polygon. The first and the last pair of coordinates must have to be the same otherwise, the browser will add the first pair in the end to close the polygon.

download

<!DOCTYPE html>
<html>
<body>

<h1>The area download attribute</h1>

<p>Click on the butterfly or the grass to download its content.</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map name="butterflymap">
  <area shape="rect" coords="0,0,82,126" alt="butterfly" href="information_about_the_butterfly.htm" download>
  <area shape="circle" coords="123,58,36" alt="grass" href="mergrass.gif" download>
</map>

<p><b>Note:</b> The download attribute is not supported in IE, Safari or Opera version 12 (and earlier).</p>

</body>
</html>
  • Syntax: <area href=”link” download=”name”>
  • This is a special attribute, the value of this attribute is a text. Here, when a user clicks the link the file gets download.
  • The download attribute can only be used if the href attribute is present.
  • The value of the download attribute is the new name of the downloaded file. The new name is optional.

href

<!DOCTYPE html>
<html>
<body>

<h1>The area href attribute</h1>

<p>Click on the butterfly or the grass to watch it closer:</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map id="butterflymap" name="butterflymap">
<area shape="rect" coords="0,0,82,126" alt="buttefly" href="https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg">
<area shape="circle" coords="123,58,36" alt="grass" href="https://cdn.pixabay.com/photo/2017/06/11/02/05/summer-2391348_960_720.jpg">

</map>

</body>
</html>
  • Syntax: <area href = “link”>
  • This attribute is a link. If this attribute is not present then the <area> tag will not be a hyperlink.

shape

<!DOCTYPE html>
<html>
<body>

<h1>The area href attribute</h1>

<p>Click on the butterfly or the grass to watch it closer:</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map id="butterflymap" name="butterflymap">
<area shape="rect" coords="0,0,82,126" alt="buttefly" href="https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg">
<area shape="circle" coords="123,58,36" alt="grass" href="https://cdn.pixabay.com/photo/2017/06/11/02/05/summer-2391348_960_720.jpg">

</map>

</body>
</html>
  • Syntax: <area shape = “default|circle|rect|poly>
  • This attribute has a value in the text. The shape attribute specifies the shape of the region or the area decided by the coords attribute.
  • The shape attribute has 4 values:
    • default: Specifies the entire region.
    • circle: Defines a circular region
    • rect: Defines a rectangular region
    • poly: Defines a polygonal region

target

<!DOCTYPE html>
<html>
<body>

<h1>The area href attribute</h1>

<p>Click on the butterfly or the grass to watch it closer:</p>

<img src="https://cdn.pixabay.com/photo/2017/09/09/20/12/butterfly-2733287_960_720.jpg" width="145" height="126" alt="butterfly" usemap="#butterflymap">

<map id="butterflymap" name="butterflymap">
<area shape="rect" coords="0,0,82,126" alt="buttefly" href="https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg" target="_blank">
<area shape="circle" coords="123,58,36" alt="grass" href="https://cdn.pixabay.com/photo/2017/06/11/02/05/summer-2391348_960_720.jpg">

</map>

</body>
</html>
  • Syntax: <area href=”link” target=”_blank|_self|_parent|_top>
  • This attribute specifies where to open the linked document in the image map
  • This attribute has five values:
    • _blank: opens the linked document in a new window or tab.
    • _self: opens the linked document in the self frame.
    • _parent: opens the linked document in the parent frame.
    • _top: opens the linked document in the full window.

Conclusion

Here we have discussed all the attributes and the usage of the <area> tag. The <area> tag is quite fascinating as it converts some areas in the image into a hyperlink. We don’t need to learn all the attributes as it does not require but a few of them are important to learn i.e shape, href, and coords.

Note: The <area> tag is always nested in the <map> tag.

Hope you like this article on map and area tag in html. Refer this for more knowledge

Leave a Comment

Your email address will not be published. Required fields are marked *