HTML area tag shape attribute

The HTML

tag is an essential element when it comes to creating image maps, which allow for the clickable areas over an image to be defined. One of the most critical attributes of the

tag is the shape attribute, which specifies the shape of the clickable area. This article will guide you through understanding the

tag’s shape attribute, how to use it effectively, and illustrate its importance through practical examples.

I. Introduction

A. Definition of the area tag

The area tag is used in conjunction with the map tag to define areas within an image that act as hyperlinks. It allows web developers to create more interactive and visually appealing web designs.

B. Purpose of the shape attribute

The shape attribute dictates the geometry of the areas defined by the

tag. By specifying shapes like rect, circle, and poly, developers can customize how clickable regions appear on their images, enhancing user experience.

II. Syntax

A. Basic syntax of the area tag

The basic syntax of an

tag is as follows:

<area shape="..." coords="..." href="..." alt="...">

– shape: Defines the shape of the clickable area (e.g., rect, circle, poly).

– coords: Specifies the coordinates of the shape.

– href: The link the area points to.

– alt: Alternative text for the area.

B. Usage of the shape attribute

The shape attribute is used to define the geometrical shape of the area. Below are the three shapes that can be used with the area tag:

III. Shape Attributes

A. Rect

1. Definition and usage

The rect shape allows you to create a rectangular clickable area. It defines the area using four integer values indicating the coordinates of the top-left corner and the bottom-right corner.

2. Syntax example

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Rectangle">
</map>

B. Circle

1. Definition and usage

The circle shape defines a circular clickable area, specified by three integer values: the x and y coordinates of the circle’s center and the radius.

2. Syntax example

<map name="examplemap">
  <area shape="circle" coords="100,100,75" href="https://example.com" alt="Example Circle">
</map>

C. Poly

1. Definition and usage

The poly shape allows for the creation of a polygonal clickable area, defined by a series of coordinates that represent the vertices of the polygon.

2. Syntax example

<map name="examplemap">
  <area shape="poly" coords="120,80, 160,30, 200,80" href="https://example.com" alt="Example Polygon">
</map>

IV. Browser Compatibility

A. Overview of browser support for the area tag

The area tag is universally supported across modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it’s essential to ensure that images are correctly wrapped within the