HTML <area> Tag

❮ Prev Next ❯

The <area> tag identifies the active areas (coordinates, form, 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 the case of which the area that is higher in the HTML code 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:

<!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="90,90,35,55" alt="php" href="https://www.w3docs.com/">
    </map>
  </body>
</html>

Try it Yourself »

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for the active area.
coords		Specifies the coordinates of the active area.
	x1,y1,x2,y2	Upper left and lower right corner rectangle (shape="rect").
	x,y, radius	Center of a circle and radius (shape="circle").
	x1,y1,x2,y2,...,xn,yn	Polygon vertexes (shape="poly").
download	filename	Indicates that when you click on a specific area, the file must be downloaded (the user will be prompted to save the file).
media	media query	Specifies for which device types the specified URL will be optimized. The value can be any media request.
href	URL	Specifies the reference for the transition.
hreflang	language_code	Defines the language of the document referenced. Used only with the href attribute.
nohref	value	Specifies an area that does not contain a reference to another document. Not supported in HTML5.
rel		Establishes a link between the current and linked documents.
	alternate	Link to an alternative version of the document.
	author	Link to an author of the document.
	bookmark	A permanent link to the document.
	help	Link to a document with help.
	license	Link to a page with a licensed agreement or copyrights.
	next	Link to the next page/section.
	nofollow	Instructs some search engines that the hyperlink should not influence the ranking of the link's target in the search engine's index.
	noreferrer	Specifies that the browser shouldn’t pass the HTTP header, if the user clicked on the link.
	prefetch	Indicates that one should cache the linked document.
	prev	Link to the previous page/section.
	search	Link to the search for the document.
	tag	Defines a tag in the current document.
shape		Defines the shape of the area
	default	The default area (rectangular).
	rect	Rectangular area.
	circle	The area in the form of a circle.
	poly	Polygonal.
target		Specifies how the linked document should be opened.
	_blank	In a new window.
	_self	In the current window.
	_top	Full width in the window.
	_parent	In the parent frame.
	frame_name	In the frame Not supported in HTML5.
type	media_type	Specifies MIME-type (specification for transmission over the network of files of various types) of the linked document.