New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

# area

Defines an interactive area within a map.

Example: Copy

<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
<area title="North America" href="" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
<area title="South America" href="" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
<area title="Europe" href="" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
<area title="Africa" href="" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
<area title="Asia" href="" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
<area title="Australia" href="" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">


Defines the title of the area.

"North America"

The title will appear when hovering the area.


Defines the shape of the area.


The shape is a rectangle and requires 4 coordinates.


The shape is a circle and requires 2 coordinates and 1 radius.


The shape is a polygon with unlimited points.


Defines the coordinates related to the shape.


A rect requires two pairs x1,y1,x2,y2, where the first one defines the top left corner, and the second one the bottom right corner.


A circle requires a pair and a radius x,y,r. The pair defines the center of the circle.


A polygon requires a collection of x,y pairs.


Defines the target of the area.


You can pass an absolute URL.


You can pass a URL relative to the root domain.

"mailto:[email protected]"

You can use the mailto protocol. Clicking the area will open the user's email client.


Defines in which tab or window the clicked area will show up.


Opens in a new browsing context, which is usually a new tab.


Opens in the current tab.


Opens in the parent browsing context, or _self is there is none.


Opens in the top browsing context, or _self is there is none.