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

html image map generator coords in html area shape html html area tag html image map responsive html program for image mapping how to find coordinates of an image how to know the coordinates of an image in html html tutorialshtml editor html code html form html tutorial html color html color codes html table html img html5 html code for website html and css html programs html website free html editor html5 tutorial wysiwyg html editor html tutorial pdf html converter php tutorial html example html tutorial css tutorial html css html tags html basics code html html online html mailto html lang html tags list

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2025 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai