<area>: The Image Map Area element

The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.

194

This element is used only within a <map> element.

Try it

Attributes

This element's attributes include the global attributes.

195
196
alt
197
198

199 A text string alternative to display on browsers that do not display images. 200 The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. 201 This attribute is required only if the href attribute is used. 202

203
204
coords
205
206

207 The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>. 208 This attribute must not be used if shape is set to default. 209

210
    211
  • 212 rect: the value is x1,y1,x2,y2. 213 The value specifies the coordinates of the top-left and bottom-right corner of the rectangle. 214 For example, in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> the coordinates are 0,0 and 253,27, indicating the top-left and bottom-right corners of the rectangle, respectively. 215
  • 216
  • 217 circle: the value is x,y,radius. Value specifies the coordinates of the circle center and the radius. 218 For example: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"> 219
  • 220
  • 221 poly: the value is x1,y1,x2,y2,..,xn,yn. Value specifies the coordinates of the edges of the polygon. 222 If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon 223
  • 224
225

The values are numbers of CSS pixels.

226
227
download
228
229

230 This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. 231 See <a> for a full description of the download attribute. 232

233
234
href
235
236

237 The hyperlink target for the area. 238 Its value is a valid URL. 239 This attribute may be omitted; if so, the <area> element does not represent a hyperlink. 240

241
242
hreflang 243 Deprecated 244
245
246

247 Indicates the language of the linked resource. Allowed values are defined by RFC 5646: Tags for Identifying Languages (also known as BCP 47). 248 Use this attribute only if the href attribute is present. 249

250
251
ping
252
253

254 Contains a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). 255 Typically used for tracking. 256

257
258
referrerpolicy
259
260

A string indicating which referrer to use when fetching the resource:

261
    262
  • no-referrer: The Referer header will not be sent.
  • 263
  • no-referrer-when-downgrade: The Referer header will not be sent to origins without TLS (HTTPS).
  • 264
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • 265
  • origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
  • 266
  • same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
  • 267
  • strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
  • 268
  • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
  • 269
  • 270 unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). 271 This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins. 272
  • 273
274
275
rel
276
277

278 For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. 279 The value is a space-separated list of link types. 280 The values and their semantics will be registered by some authority that might have meaning to the document author. 281 The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present. 282

283
284
shape
285
286

The shape of the associated hot spot. The specifications for HTML defines the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.

287
288
target
289
290

291 A keyword or author-defined name of the browsing context to display the linked resource. 292 The following keywords have special meanings: 293

294
    295
  • _self (default): Show the resource in the current browsing context.
  • 296
  • _blank: Show the resource in a new, unnamed browsing context.
  • 297
  • 298 _parent: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. 299 If there is no parent, acts the same as _self. 300
  • 301
  • 302 _top: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). 303 If there is no parent, acts the same as _self. 304
  • 305
306

Use this attribute only if the href attribute is present.

307
308

Note: Setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

309
310
311

Deprecated attributes

312
name 313 Deprecated 314
315
316

Define a names for the clickable area so that it can be scripted by older browsers.

317
318
nohref 319 Deprecated 320
321
322

Indicates that no hyperlink exists for the associated area.

323
324

Note: The nohref attribute is not necessary, as omitting the href attribute is sufficient.

325
326
327
type 328 Deprecated 329
330
331

Hint for the type of the referenced resource. Ignored by browsers.

332
333

Examples

<map name="primary">
334   <area
335     shape="circle"
336     coords="75,75,75"
337     href="left.html"
338     alt="Click to go Left" />
339   <area
340     shape="circle"
341     coords="275,75,75"
342     href="right.html"
343     alt="Click to go Right" />
344 </map>
345 <img
346   usemap="#primary"
347   src="https://via.placeholder.com/350x150"
348   alt="350 x 150 pic" />
349 

Result

Technical summary

350 351 352 353 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383
Content categories 354 Flow content, 355 phrasing content. 356
Permitted contentNone; it is a void element.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parentsAny element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent.
Implicit ARIA rolelink when href attribute is present, otherwise no corresponding role
Permitted ARIA rolesNo role permitted
DOM interfaceHTMLAreaElement

Specifications

Specification
HTML Standard
# the-area-element

Browser compatibility

BCD tables only load in the browser