HTML shape attribute

Last update on August 19 2022 21:51:13 (UTC/GMT +8 hours)

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

View this example in a separate browser window

Example of HTML shape attribute with a element

Previous: HTML selected attribute
Next: HTML size attribute