HTML Reference Manual

HTML Tag Encyclopedia

HTML: <area> shape attribute

The shape attribute specifies the shape of the area, and when combined with the coords attribute, it specifies the size, shape, and position of the area.

　HTML <area> tag

Online Example

Image map with clickable areas：

Example

<!DOCTYPE html>
<html>
<title>HTML: <area> shape attribute　-　Basic Tutorial Website　oldtoolbag.com</title>
<body>
<p>Click on the sun or other planets to observe them closely：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
　　<area shape="rect" coords="0,0,82,126"href="sun.html" alt="Sun">
　　<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
　　<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the shape attribute

Definition and usage

The shape attribute specifies the shape of the area.

The shape attribute is the same as coords Properties in conjunction with HTML to specify the size, shape, and position of the area.

HTML 4.01 With HTML5The differences

None.

Syntax

<area shape="default|rect|circle|poly">

Attribute value

Value	Description
default	Specifies all areas.
rect	Defines a rectangular area.
circle	Defines a circle.
poly	Defines a polygonal area.

　HTML <area> tag

HTML: <template> tag