HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: area

The HTML tag <area> is used in conjunction with the <map> tag to define clickable areas within an image. These clickable areas are known as image maps and can be used to create interactive graphics, such as navigation menus or hotspots.

The <area> tag is a self-closing tag and has several attributes that define the shape, size, and location of the clickable area. The most commonly used attributes are:

  • shape: defines the shape of the clickable area. The possible values are "rect" (rectangle), "circle", "poly" (polygon), and "default" (used for the entire image).
  • coords: defines the coordinates of the clickable area. The values depend on the shape attribute. For example, if the shape is "rect", the coords attribute should have four values: x1, y1, x2, y2 (the top-left and bottom-right corners of the rectangle).
  • href: defines the URL of the page that will be loaded when the clickable area is clicked.
  • alt: defines the alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader.

Here are some examples of how to use the <area> tag:

Example 1: Rectangle

In this example, we define a rectangular clickable area that links to Google's homepage:

<img src="map.png" alt="Map" usemap="#map">

<map name="map">
  <area shape="rect" coords="0,0,100,100" href="https://www.google.com/" alt="Google">
</map>

The <img> tag displays the image that contains the clickable area. The usemap attribute specifies the name of the <map> tag that defines the clickable areas.

The <map> tag contains the <area> tag that defines the clickable area. The name attribute of the <map> tag must match the usemap attribute of the <img> tag.

The shape attribute is set to "rect" to define a rectangular clickable area. The coords attribute specifies the coordinates of the top-left and bottom-right corners of the rectangle.

The href attribute specifies the URL of the page that will be loaded when the clickable area is clicked. The alt attribute specifies the alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader.

Example 2: Circle

In this example, we define a circular clickable area that links to Wikipedia's homepage:

<img src="map.png" alt="Map" usemap="#map">

<map name="map">
  <area shape="circle" coords="50,50,50" href="https://www.wikipedia.org/" alt="Wikipedia">
</map>

The shape attribute is set to "circle" to define a circular clickable area. The coords attribute specifies the coordinates of the center of the circle and its radius.

Example 3: Polygon

In this example, we define a polygonal clickable area that links to Amazon's homepage:

<img src="map.png" alt="Map" usemap="#map">

<map name="map">
  <area shape="poly" coords="0,0,100,0,50,100" href="https://www.amazon.com/" alt="Amazon">
</map>

The shape attribute is set to "poly" to define a polygonal clickable area. The coords attribute specifies the coordinates of the vertices of the polygon.

Example 4: Default

In this example, we define a clickable area that covers the entire image and links to Microsoft's homepage:

<img src="map.png" alt="Map" usemap="#map">

<map name="map">
  <area shape="default" href="https://www.microsoft.com/" alt="Microsoft">
</map>

The shape attribute is set to "default" to define a clickable area that covers the entire image. The coords attribute is not needed in this case.

These are just a few examples of how to use the <area> tag. With some creativity, you can create complex image maps that enhance the user experience of your website.

References

Activity