w3resource

HTML shape attribute

shape

The purpose of the HTML shape attribute is to define the shape of an area element or a client-side image map.

Supported elements

HTML shape attribute supports area and a elements.

Syntax

<ElementName shape="value" >.....</ElementName>

Where ElementName is any supported element.

Type of value

Shape.

Value

Value Description
default Defines the entire region.
rect Defines a rectangular region.
circle Defines a circular region.
poly Defines a polygonal region.

Default value

The default value of HTML shape attribute is rect.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML shape attribute with area element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML shape attribute with area element</title>
</head>
<body>
<p><img src="attribute-shape-area.gif" alt="accesskey map   example " width="308" height="190" border="0" usemap="#Map"></p>
<map name="Map">
<area shape="rect" coords="8,5,100,77"   href="../../mysql/mysql-tutorials.php" target="_blank" alt="mysql   tutorial">
<area shape="circle" coords="155,93,59" href="../../php/php-home.php" target="_blank" alt="php tutorial">
<area shape="rect" coords="197,136,306,188" href="../../sql/sql-tutorials.php" alt="sql tutorials">
</map>
</body>
</html>

Result

html shape attribute with area element

View this example in a separate browser window

Example of HTML shape attribute with area element

Example of HTML shape attribute with a element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML shape attribute with area element</title>
</head>
<body>
<object data="tutorials-map.gif" type="image/gif" usemap="#Map_tuts">
<map name="Map_tuts">
<p><a shape="rect" coords="8,5,100,77"
href="../../mysql/mysql-tutorials.php" target="_blank">mysql
tutorial</a></p>
<p><a shape="circle" coords="155,93,59" href="../../php/php-home.php" target="_blank">php tutorial</a></p>
<p><a shape="rect" coords="197,136,306,188" href="../../sql/sql-tutorials.php">sql tutorials</a></p>
</map>
</object>
</body>
</html>

Result

html shape attribute with a element

View this example in a separate browser window

Example of HTML shape attribute with a element

Previous: HTML selected attribute
Next: HTML size attribute