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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×