HTML - shape Attribute

The shape is an HTML attribute used to specify an area's shape. It is used with the cords attribute to specify an area's size, shape, and placement. And the shape attribute can be used with the <area>, and <a> element.

Syntax

Following is the syntax of the shape attribute −

<area shape=" rect | circle " cords=" ">

Example

In the following example, we are going to use the shape attribute to specify the rectangular shape.

<!DOCTYPE html>
<html>
<head>
   <title> HTML shape Attribute </title>
</head>
<body style="text-align:center;">
   <h1> tutorialspoint </h1>
   <h2> HTML shape Attribute </h2>
   <img src="https://i.pinimg.com/originals/98/4a/76/984a7602f2200e18e6a8657722c09385.png" width="300" height="119" usemap="#shapemap" />
   <map name="shapemap">
      <area shape="rect" coords="100, 20, 250, 80" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRttgqluhjReBW6EbWI5sdFH8g3TdRa5wzJPrnV_SxAo2HZeema27VZzWtoOYRHYtsty68&usqp=CAU" alt="Square">
   </map>
</body>
</html>

On running the above code, the output window will pop up displaying the clickable rectangle on the webpage. when the user tries to click on the rectangle, it further displays another rectangle.

Example

Considering the another scenario, where we are going to use the shape attribute to specify the circular shape.

<!DOCTYPE html>
<html>
<head>
   <title> HTML shape Attribute </title>
</head>
<body style="text-align:center;">
   <h1> tutorialspoint </h1>
   <h2> HTML shape Attribute </h2>
   <img src="https://t4.ftcdn.net/jpg/05/13/51/83/360_F_513518338_WdNSvv9IcRuMX8e5urFsq4UISKivj2vk.jpg" width="200" height="200" usemap="#shapemap" />
   <map name="shapemap">
      <area shape="circle" coords="100, 100, 25" href="https://i.pinimg.com/originals/fe/74/02/fe74026279d49724edba9a414bf48240.jpg" alt="Square">
   </map>
</body>
</html>

When we run the above code, it will generate an output consisting of the clickable circle displayed on the webpage. whjen the user clicks on the circle, it further displays another circle.

html_attributes_reference.htm
Advertisements