html tutorial - shape Attribute in HTML - html5 - html code - html form

Learn html - html tutorial - Shape attribute in html - html examples - html programs
- The shape attribute defines the shape of an area.
- The shape attribute is used together with the coords(coordinates) attribute to determine the size, shape, and placement of an area.
Syntax for shape attribute in HTML:
<area shape="default|rect|circle|poly">
Applies To:
Element | Attribute |
---|---|
<area> | shape |
Attribute Values:
Value | Description |
---|---|
default | Defines the entire region. |
rect | Specifies a rectangular region |
circle | Specifies a circular region. |
poly | Specifies a polygonal region. |
Sample Coding for shape Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy shape attribute</title>
</head>
<body>
<img src="area.png" alt="usemap" usemap="#wikitechy"/>
<map name="wikitechy">
<area shape="rect" coords="19,26,126,62"
href="http://www.wikitechy.com/step-by-step-tutorials/php/php-introduction">
<area shape="rect" coords="19,90,125,135"
href="http://www.wikitechy.com/step-by-step-tutorials/html/introduction-of-html">
<area shape="circle" coords="71,180,36"
href="http://www.wikitechy.com/step-by-step-tutorials/css-tutorials/css-introduction">
</map>
</body>
</html>
Code Explanation for shape Attribute in HTML:

- <area> tag defines an area by using image map.
- shape is an attribute, which specifies the shape of an area (rectangle).
Output for shape Attribute in HTML:

- If the user clicks inside the PHP rectangle that will be navigated to the tutorials page of the PHP.
Browser Support for shape Attribute in HTML:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes |