<area>

The HTML <area> element specifies a clickable region within an image map, working alongside the <map> element to create interactive areas that link to other resources or pages.

area tag

The <area> element creates a clickable region within an image map and must be placed inside a <map> element.

Syntax

index.html

<area shape="shape" coords="coordinates" href="URL" alt="description" />

area Demo

index.html

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left"
  />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right"
  />
</map>
<img usemap="#primary" src="/placeholder.jpeg" alt="350 x 150 pic" />

Attributes

Attribute	Value	Description
`alt`	text	Specifies alternative text for the area, required if `href` is present.
`coords`	coordinates	Defines the shape's coordinates within the image.
`download`	filename	Indicates that clicking the area downloads the linked resource.
`href`	URL	Specifies the link destination for the area.
`hreflang`	language_code	Defines the language of the linked resource.
`media`	media query	Specifies the target media or device for the link.
`referrerpolicy`	Various options (e.g., `no-referrer`, `same-origin`)	Determines what referrer information is sent with the request.
`rel`	Various options (e.g., `nofollow`, `noopener`)	Defines the relationship between the current document and the linked resource.
`shape`	`default`, `rect`, `circle`, `poly`	Specifies the clickable shape.
`target`	`_blank`, `_self`, `_parent`, `_top`, `framename`	Determines where to open the linked resource.
`type`	media_type	Specifies the MIME type of the linked resource.

Default CSS Settings

Browsers typically apply the following styles to <area> elements:

style.css

area {
  display: none;
}

Definition and Usage

The <area> element is used within an image map to define interactive regions that allow users to navigate to different locations. It must be inside a <map> tag.

The usemap attribute in the <img> tag links an image to a <map> by referencing the name attribute of the corresponding <map> element.

The <area> element allows you to create interactive, clickable regions within an image, enhancing user experience and navigation. The use of the <map> and usemap attribute makes it possible to efficiently link the image and its clickable regions.

The <figcaption> element provides a caption for a <figure>, adding context or details about its content, such as images or diagrams.

<map>

The HTML <map> element creates a client-side image map, linking designated areas of an image to various URLs, while the <area> element identifies the clickable regions within the map.