#key# HTML's: HyperText Markup Language #key# **`<area>`tag** defines the *area inside an image map*. An image map has predefined clickable areas. 

This `<area>` tag can only be used between the `<map>`. Almost every latest browser (Google Chrome, Mozilla Firefox, or Safari) supports area elements in HTML.

# Syntax

---
```html
<area attribute1 attribute2 ...>
```

# Attributes

The `<area>` tag supports both types of attributes, i.e., _Global_ and _Event Attributes_ in HTML.

Attributes List

align-center

# Code

Consider the following code example:

<html>
   <head>
       <title>Area Tag Example</title>
    </head> 
   <body>
      <h1>The map and area elements</h1>
      <img src="/api/edpresso/shot/5010363302543360/image/5185960926511104" alt="Workplace" usemap="#workmap" width="400" height="379">
      <map name="workmap">

        <area shape="circle" coords="230,80,50" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
        <area shape="rect" coords="90,190,280,350" alt="Tablet" href="https://androidcity.pk/product-category/tablets/">
         
      </map>
   </body>
</html>

codemirror

# Explanation

By clicking on the coffee image, you will be redirected to the coffee's Wikipedia page. And on clicking the phone image, you will be redirected to the smartphone's webpage.

Lines six and seven tell us the complete use of the `<Area>` element in the HTML document.

How to use the HTML <area> element

Defines clickable areas in image maps within `<map>`, supported by major browsers, with clickable coordinates.

Attribute	Value	Detail
href	URL	Hyperlink target for area.
alt	text	Alternate text for the area is also required when href is present.
coords	coordinates	Specifies the coordinates of area.
download	filename	Get target ready to download.
media	media query	Optimize target URL for specific device/media.
hreflang	language code	Specified the target url language.
type	media type	Media type of target URL.
shape	default circle rect poly	Occupied area shape.
target	blank parent self top	Destination i.e. where the target URL open.

Shape	Values
circle	x, y, radius
rect	x1, y1, x2, y2
poly	x1, y1, x2, y2, …, xn, yn

How to use the HTML <area> element

Syntax

Attributes

Attributes List

HTML <area> coords attribute

Code

Explanation

HTML `<area>` coords attribute