HTML <area> tag

HTML <area> tag

The <area> tag defines a clickable region on an image-map.

The <area> element is used only within a <map> element.

Note: The name attribute in the <map> tag is associate with the <img> element's usemap attribute to create a relationship between the image and the map.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <img src="devices.jpg" alt="apple Devices" style="width:auto;" usemap="#apple-products"> <map name="apple-products"> <area shape="rect" coords="10,20,340,350" alt="macbook" href="/macbook.htm"> <area shape="rect" coords="355,185,540,340" alt="ipad" href="/ipad.htm"> <area shape="rect" coords="545,240,625,340" alt="iphone" href="/iphone.htm"> </map> </body> </html>

Attributes

The following are the attributes of <area> tag. Also try Global attributes.

AttributeValueExplanation
shape
  • default
  • circle
  • rect
  • poly
Defines the shape of the area.
coordscoordinatesSpecifies the coordinates of the area in an image-map.
hrefURLSpecifies the URL to be requested and displayed.
alttextSpecifies an alternate text for the area, if image failed to load.

Deprecated Attributes

The following attributes should not be used in any case.

AttributeValueExplanation
accesskeycharacterSpecifies the shortcut key to active an html element.
nametextSpecifies a names for the clickable area so that it can be scripted by older browsers.
nohref-Specifies that an area has no associated link.
tabindexnumeric valueSpecifies the tabbing order of the element.
typemedia_typeSpecifies a media type of the linked document.

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author