<area> tag — TutorialBrain

Note/Info:
The <area> tag has no end tag in HTML5.

HTML5 <area> tag

The <area> tag defines a clickable area as a hotspot inside an image-map where the user can click.

You must place the <area> tag inside the <map> tag.

Syntax:

Example

<map name="SocialMedia">
  <area shape="rect" coords="0,0,82,126" alt="Facebook" href="https://www.facebook.com/">
  <area shape="circle" coords="124,58,8"alt="Telegram" href="https://web.telegram.org/#/login">
</map>

CSS Default Value

display:none

How Browser will display

BLOCK Level.

Difference between HTML4.01, XHTML and HTML5

HTML4	XHTML	HTML5
HTML4.01 does not support some outdated attributes.	<area> tag must have a trailing slash as <area/> to mark the end of the tag	HTML5 contains some new attributes. It does not support some old attributes of HTML4.01

Attributes used with <area> tag

Attribute	Description
shape	It describes shape of the area. The values which shape can take are- shape="default" - default value which is a Rectangle. shape="rect" for Rectangle. shape="circle" for Circle. shape="poly" for Polygon.
coords	It sets the size and position of the shape attribute by using the coordinates. For Rectangle - The format of the coordiantes will be - x1,y1,x2,y2. For Circle - The format of the coordiantes will be - x,y,radius. For Polygon - The format of the coordiantes will be - x1,y1,x2,y2,x3,y3...xn,yn where 'n' is a number which depends on the sides of the polygon.
href	It defines the target hyperlink using a URL.
alt	When browser is not able to load the image or the hyperlink then it is an alternative text should which will be displayed to the user. It is a good practice to add this attribute when you code the href attribute.
download	It enables the target link as a download link to download the target object. Safari, IE and Opera Version 12 and prior does not support this attribute.
hreflang	It defines language code of linked URL.
media	This attribute is new in HTML5. It defines the media or device for which the target URL is created. It uses media query.
nohref	Informs the browser that a particular area does not have a target link URL. (HTML5 does not support this attribute).
type	Sets the type of media for the target URL.
rel	This relates the current HTML document with the target link URL. This can take the following values - rel="author" - Relates the author of the linking HTML document rel="alternate" - refer to an alternate version of the HTML document which can be a mirror page or a page in other language or page for printing etc. rel="bookmark" - to bookmark the URL rel="nofollow" - It informs the browser not to follow the target link. rel="noreferrer" - Tells the browser not to send any HTTP referer header request even if the user follows the link URL. rel="prefetch" - Request the browser to prefetch the target URL using the Cache. rel="tag" - Relates the keyword of the current HTML document with the target URL. rel="search" - It links to a search from the current document to the target. rel="prev" - Links to the previous document. rel="next" - It relates to the next document. rel="help" - relates to the 'Help' document. rel="license" - relates to copyright information for the document.
target	This informs the browser how to open the target URL. target="_blank" - Tells the browser to open the target URL in a new tab. target="_self" - Tells the browser to open the target URL in the same frame by replacing the current URL. target="_top" -Requests the browser to open the target URL in a full screen window. target="_parent" - Informs the browser to open the target URL in a the parent frame of window.

Note/Warning/Danger/Info/Success

Normally, the shape and coords attributes are always coded together.

rel="noreferrer" and rel="nofollow" tells the search engine crawler not to follow and refer the target link.

This means, it does not pass link juice to the target URL. Link Juice heps in increasing the SEO of a HTML document.

This tells the browser that the current HTML document does not value the target URL so search engine like Google will consider the target link like a paid link.

Global Attributes

The <area> tag supports Global Attributes.

Event Attributes

The <area> tag supports Event Attributes.

Supporting Browsers

Related Tags

<map> tag.