HTML Tutorial

HTML Tag: <area>

The <area> tag defines an area inside an image map and provides a link or an action to that area.

Usage of <area>

The <area> tag is used within an <img> element and is accompanied by the usemap attribute of the <img> element. The usemap attribute contains the URL of the image map, which defines the clickable areas on the image.

Attributes of <area>

  • href: Specifies the hyperlink destination for the area.
  • alt: Provides text for alternative representation (e.g., for screen readers).
  • shape: Defines the shape of the area, such as "rect" (rectangle), "circle", or "poly" (polygon).
  • coords: Specifies the coordinates of the area within the image, depending on the shape.
  • target: Sets the target frame for the linked content.

Examples with <area>

Create a clickable area on an image:

<img src="image.jpg" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="0,0,100,100" href="page1.html" alt="Page 1">
</map>

Create a circle area:

<area shape="circle" coords="50,50,25" href="page2.html" alt="Page 2">

Create a polygon area:

<area shape="poly" coords="0,100,100,100,100,0" href="page3.html" alt="Page 3">

Simple HTML Example: Exploring the <area> Tag

<!DOCTYPE html>
<html>
<body>
  <img src="world_map.jpg" usemap="#world-map">
  <map name="world-map">
    <area shape="rect" coords="0,0,100,100" href="europe.html" alt="Europe">
    <area shape="circle" coords="50,50,25" href="africa.html" alt="Africa">
    <area shape="poly" coords="0,100,100,100,100,0" href="america.html" alt="America">
  </map>
</body>
</html>