HTML <area> Tag for Image Map Areas

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <area/> Tag in HTML 5

An HTML image map is dynamic interactive content that sets up image areas that a user can click on to navigate to other pages. The <area/> tag is used to define the areas on the image. These areas may be either clickable, to navigate to another location, or non-clickable. If there is only one link for the entire image, an <a href> tag (hypertext link) with image should be used instead.

n

To see how an image map works, mouse over or click on the different areas of this image map:

HTML 5 sections HTML <header> Tag HTML <nav> Tag HTML <section> Tag HTML <article> Tag HTML <aside> Tag HTML <footer> Tag

This is an actual working demo of the <area> tag example code below.


<area/> Tag Syntax

Rules for coding HTML area/ elements
<area .../>

<area/> Content Model

Contents of the area element

Content: Empty. All properties are coded using attributes.

Since the <area/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiter string /> rather than just > (<area .../>).


<area> Tag Attributes

Attributes of the <area> tag
global attributes In addition to the personal attributes of the <area> tag below, any of the common HTML attributes can also be coded.
alt
coords The first <area coords> that match determines the area element that is used. Therefore when two areas overlap, the code for the area on top must come before the code for the area underneath it. For example, in the <area> tag demo above, the area element for the "<section>" area on the image must come before the area element for the "<article>" area.
href="target-URL"
href="#placemark"
href="any-URI-ref"

URL of target page, a hash symbol and fragment identifier for another location within the current page or any other URI reference (or IRI reference depending on the encoding) such as a mailto: link

Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference.

If the value of the href attribute resolves to an HTTP URI, it may contain any of the following components:

  1. protocol scheme, typically http: or else https:
  2. username, followed by an "@"
  3. host name or IP address
  4. port number, which defaults to 80 for the http scheme and 443 for the https scheme
  5. absolute or relative path
  6. search query, indicated by "?"
  7. fragment identifier, indicated by "#"

If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash /..., it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.

hreflang
media
ping="http://ClickedLink.com/"If a user clicks on this area, the URLs in the ping attribute will be sent asynchronous notifications of the event. The list of URLs to be notified are separated by spaces. Each of the URLs will be notified via a HTTP POST request. The address of the current document will be sent in a Ping-From header, and, if the target is from the same domain, in a Referer[sic] header also. The target URL of the hypertext link from the href attribute will be sent in a Ping-To header.
rel="acquaintance"
rel="alternate"
rel="archives"
rel="author"
rel="bookmark"
rel="child"
rel="co-resident"
rel="co-worker"
rel="colleague"
rel="contact"
rel="crush"
rel="date"
rel="external"
rel="feed"
rel="feed alternate"
rel="first"
rel="friend"
rel="help"
rel="icon"
rel="index"
rel="kin"
rel="last"
rel="license"
rel="me"
rel="met"
rel="muse"
rel="neighbor"
rel="next"
rel="nofollow"
rel="noreferrer"
rel="parent"
rel="pingback"
rel="prefetch"
rel="prev"
rel="search"
rel="sibling"
rel="sidebar"
rel="spouse"
rel="stylesheet"
rel="sweetheart"
rel="tag"
rel="up"

The rel attribute specifies the purpose of the link. It may contain a single keyword, or a list of rel attribute keyword values separated by spaces.

rel attribute values for hypertext links
acquaintance
The person described by the document containing the link considers the person described by the referenced document to be an acquaintance.
alternate
The referenced document is an alternate representation of the document containing the link. This should only be used when the referenced document has content similar to the current document but published in an alternate form, such as a syndicated feed for a list of blog posts (see rel="feed alternate"). If the document has been translated into other languages, the language of the translation should be indicated in an hreflang attribute (not the lang attribute).
archives
The referenced document is a list of previously created versions of related documents, such as the archives of a blog.
author
The link references a resource about the author of the document. It could be a web page describing the author or another type of resource, such as a mailto: link to the email address of the author.
bookmark
Provides a permanent link to the document or to a section within the document.
child
The person described by the referenced document is a child of the person described by the document containing the link.
co-resident
The person described by the referenced document lives in the same place as the person described by the document containing the link.
co-worker
The person described by the referenced document works for the same company or organization as the person described by the document containing the link.
colleague
The person described by the referenced document works in the same field of employment as the person described by the document containing the link.
contact
The person described by the referenced document is someone who might be contacted by the person described by the document containing the link.
crush
The person described by the document containing the link has a crush on the person described by the referenced document.
date
The person described by the document containing the link has been dating the person described by the referenced document.
external
Indicates that the link is to a external resource on a different web site.
feed
For feed autodiscovery, links to a syndicated feed channel for the document or the web site. Do not use or include rel="alternate" unless the current document and the feed are alternate forms of the same content; if the current entry is a subset of the feed, such as a single blog post, use rel="feed" without "alternate" in the attribute.
feed alternate
Used when the referenced document is the syndicated feed for the current content, such as the feed for a list of blog posts in an HTML page (but not a single blog post, which would be an <entry> or <item> in the feed rather than the entire feed).
first
Links to the first document in a series of articles.
friend
The person described by the document containing the link considers the person described by the referenced document to be a friend.
help
Links to a document that provides helpful information related to the content of the document containing the link (not a general help page).
index
Links to a table of contents or index document that includes the document containing the link as well as others in the same collection of documents.
kin
The person described by the document containing the link and the one described by the referenced document are members of the same extended family.
last
Links to the last document in a series of articles.
license
Links to a document that describes the copyright license that applies to the document(s) in which the link to the license page appears.
me
The person described by the referenced document is the same person as the one described by the document containing the link. They are two pages describing the same person.
met
The person described by the document containing the link claims to have met the person described by the referenced document.
muse
The person described by the referenced document provides inspiration to the person described by the document containing the link.
neighbor
The person described by the referenced document lives near the person represented by the document containing the link.
next
In a series of documents, the referenced document is the next one in sequence following the document containing the link.
parent
The person described by the referenced document is a parent of the person described by the document containing the link.
pingback
Used in a link that provides the URL of the resource to handle a pingback for the document containing the link.
prev
In a series of documents, the referenced document is the previous one in sequence prior to the document containing the link.
New Links to a document that provides information that can be used by search engines. This could be an XML file conforming to the OpenSearch Description Document specification.
sibling
For a pair or siblings; the person described by the referenced document is a brother or sister of the person described by the document containing the link.
sidebar
Indicates that the referenced document should be loaded into the web browser's sidebar if the link is activated by the user.
spouse
The person described by the referenced document is the husband or wife of the person represented by the document containing the link.
sweetheart
The person described by the document containing the link considers the person described by the referenced document to be their sweetheart.
tag
Specifies a URI that is a "tag", which describes the subject of a page. The tag may be a URL, which leads to a web-accessible page, or just a standalone identifier.
up
Links to the document at the next higher level in a tree hierarchy. The value up may be specified more than once: rel="up" points to the parent document, rel="up up" points to the grandparent, and so forth.
rel attribute values for links to external resources
prefetch
Indicates that the referenced document should be automatically preloaded into cache.
rel attribute values for annotations
nofollow
Indicates to search engine crawlers and other robots that they should not follow the link to the referenced resource and process the document there. This can be used to indicate that the linked document should not be considered to be a recommended resource when determining the search engine rank for the linked page. This may help the page where the link appears from being penalized for "recommending" less desirable pages, such as for links to an affiliate site.
noreferrer
Indicates that the user agent should not identify the referring page to the server handling the request for the target page. If this value is omitted or ignored, the URL of the page containing the link will most likely be included in the Referer[sic] header of the HTTP request for the referenced page.
shape="default"
shape="circle"
shape="rect"
shape="poly"
target
type

<area> Tag Examples

Examples of the area tag in HTML 5

Changes in HTML 5 - <area> Tag

What's new in HTML 5

The hreflang, media and rel attributes have been added for consistency with the <link> tag.

The target attribute, which was removed from HTML 4 and XHTML, has been resurrected in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the area element type name along with the names of all HTML element types. In older versions of HTML, element type names were not associated with a namespace.


Valid HTML 5