W3docs
en
Log in

HTML <area> Tag

The <area> tag identifies the active areas of the image map. Tag description, tag attributes and usage examples.

The <area> tag identifies the active areas (coordinates, shape, size, etc.) of the image map, defined by the <map> tag. When you click on the active area of the image, a certain action takes place, for example, switching to a page with detailed information.

The <area> tag is always placed inside the <map> tag. Active areas can overlap, in which case the area that appears later in the DOM order is activated when clicked.

Syntax

The <area> tag is empty, which means that the closing tag isn’t required. But in XHTML, the <area> tag must be closed (<area />).

Example of the HTML <area> tag:

HTML tag <area>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Try it Yourself »

Attributes

AttributeValueDescription
alttextSpecifies an alternate text for the active area.
coordsx1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,ynSpecifies the coordinates of the active area. Values depend on the shape: rect (upper left and lower right corners), circle (center and radius), or poly (polygon vertices).
downloadfilenameIndicates that when you click on a specific area, the file must be downloaded.
hrefURLSpecifies the reference for the transition.
hreflanglanguage_codeDefines the language of the referenced document. Used only with href.
nohref(none)Specifies an area that does not contain a reference. Not supported in HTML5.
relalternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tagEstablishes a link between the current and linked documents.
shaperect | circle | polyDefines the shape of the area.
target_blank | _self | _top | _parent | frame_nameSpecifies how the linked document should be opened. frame_name is not supported in HTML5.
typemedia_typeSpecifies the MIME-type of the linked document.

The <area> tag supports also the Global attributes and the Event Attributes.

Practice

Practice

What is the purpose of the HTML area tag and what are its attributes?