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



Shape attribute in html

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:

shape Attribute Code Explanation

  1. <area> tag defines an area by using image map.
  2. shape is an attribute, which specifies the shape of an area (rectangle).

Output for shape Attribute in HTML:

shape Attribute Tag Output

  1. 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

Related Searches to shape attribute in html