Custom Search
| Syntax | HTML syntax - This element does not require a closing tag.
<area> XHTML syntax - This element is opened and closed, within a single tag, by adding a space followed by a forward slash at the end of the tag. <area /> |
|---|---|
| Usage | The <area> tag is used inside of a <map> tag to define a clickable area. The <map> tag specifies a client-side image map. The <area>, <map>, and <img> tags can work together to allow clickable areas to be defined within an image. First an image is specified using an <img> tag. Then a <map> tag is used to specify a client-side image map. The <map> tag contains one ore more <area> tags. Each <area> tag defines a clickable area and an associated link. The usemap attribute in the <img> tag is used to point to the <map> tag. This is accomplished by setting the name and id attributes in the <map> tag to the corresponding value. HTML <area> example. In addition to the <img> tag, the <map> tag can also be referenced from an <object> tag or an <input> tag using the usemap attribute.<p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes"> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle"> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle"> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly"> </map> </p>  XHTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes" /> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" /> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" /> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" /> </map> </p>  |
| Content Model | The <area> element cannot contain any tags. |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| alt | coords href nohref shape target | id class style title | accesskey onblur onfocus tabindex | onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup | dir lang xml:lang1 |
| Notes: 1. XHTML only. | |||||
| Attribute | Description |
|---|---|
| alt | The alt attribute is used to specify alternate text that will be displayed in the event that the image cannot be displayed. Note: This is a required attribute. |
| coords | The coords attribute specifies a comma separated list of x and y coordinates that define a clickable area. The coordinates are specified in pixels. The x and y values are relative to the top left corner of the object or image. XHTML <area> tag examples: Rectangle shape - The order of the values are as follows: left x, top y, right x, bottom y Example: <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" />
Circle shape - The order of the values are as follows:center x, center y, radius Example: <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" />
Polygon shape - The order of the values are as follows:x1, y1, x2, y2, ..., xN, yN HTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes"> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle"> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle"> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly"> </map> </p> XHTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes" /> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" /> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" /> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" /> </map> </p> |
| href | The href attribute is used to specify the URL of the web resource that will be accessed when a user clicks in the defined clickable area. HTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes"> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle"> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle"> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly"> </map> </p> XHTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes" /> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" /> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" /> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" /> </map> </p> |
| nohref | The nohref attribute is used to specify that the clickable area has no associated link. Example: <area shape="rect" coords="2,14,103,78" nohref="nohref" alt="rectangle" /> |
| shape | The shape attribute is used to specify the shape of the clickable area. Valid values are rect, circle, poly, or default. HTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes"> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle"> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle"> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly"> </map> </p> XHTML <area> example. <p> <img usemap="#shapes" src="shapes.gif" alt="picture shapes" /> <map name="shapes" id="shapes"> <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" /> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" /> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" /> </map> </p> |
| target | When a user clicks on a link to web page, the new web page will typically open in the current browser window. The target attribute allows an alternate destination to be specified. For example, the following will open the web page in a new tab or window. HTML <area> example using the target attribute. <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" target="_blank"> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" target="_blank"> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" target="_blank"> XHTML <area> example using the target attribute. <area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" target="_blank" /> <area shape="circle" coords="164,47,32" href="circle.html" alt="circle" target="_blank" /> <area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" target="_blank" /> Note: This attribute has been deprecated. |
| id | The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| accesskey | The accesskey specifies a shortcut key for a tag. The action that is taken when an access key is invoked depends on the tag and may also depend on the browser. For example, if it is used with an <a> tag, some browsers may follow the link when the access key is invoked and other browsers may give focus to the link. See accesskey Example |
| onblur | The onblur attribute specifies a script to be run when the tag loses focus. See onblur Example |
| onfocus | The onfocus attribute specifies a script to be run when the tag receives focus. See onfocus Example |
| tabindex | The tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767. See tabindex Example |
| onclick | The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example |
| ondblclick | The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example |
| onkeydown | The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example |
| onkeypress | The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example |
| onkeyup | The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example |
| onmousedown | The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example |
| onmousemove | The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example |
| onmouseout | The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example |
| onmouseover | The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example |
| onmouseup | The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example |
| dir | The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example |
| lang | The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example |
| xml:lang | The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only. |
| <area> example.<area> example using the target attribute. |