<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.
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
203href
attribute is used. 202
204 coords
205 -
206
207 The
210coords
attribute details the coordinates of theshape
attribute in size, shape, and placement of an<area>
. 208 This attribute must not be used ifshape
is set todefault
. 209-
211
-
212
rect
: the value isx1,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 are0,0
and253,27
, indicating the top-left and bottom-right corners of the rectangle, respectively. 215
216 -
217
circle
: the value isx,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 isx1,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
The values are numbers of CSS pixels.
226
227 -
212
download
228 -
229
230 This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. 231 See
233<a>
for a full description of thedownload
attribute. 232
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
241<area>
element does not represent a hyperlink. 240
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
250href
attribute is present. 249
251 ping
252 -
253
254 Contains a space-separated list of URLs to which, when the hyperlink is followed,
257POST
requests with the bodyPING
will be sent by the browser (in the background). 255 Typically used for tracking. 256
258 referrerpolicy
259 -
260
A string indicating which referrer to use when fetching the resource:
261-
262
no-referrer
: TheReferer
header will not be sent.
263 no-referrer-when-downgrade
: TheReferer
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
275 rel
276 -
277
278 For anchors containing the
283href
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 thehref
attribute is present. 282
284 shape
285 -
286
The shape of the associated hot spot. The specifications for HTML defines the values
287rect
, which defines a rectangular region;circle
, which defines a circular region;poly
, which defines a polygon; anddefault
, which indicates the entire region beyond any defined shapes.
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
Use this attribute only if the
307href
attribute is present.308310Note: Setting
309target="_blank"
on<area>
elements implicitly provides the samerel
behavior as settingrel="noopener"
which does not setwindow.opener
. See browser compatibility for support status.
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.
323324326Note: The
325nohref
attribute is not necessary, as omitting thehref
attribute is sufficient.
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
Content categories | 353354 Flow content, 355 phrasing content. 356 | 357
---|---|
Permitted content | 360None; it is a void element. | 361
Tag omission | 364Must have a start tag and must not have an end tag. | 365
Permitted parents | 368Any element that accepts phrasing content. The <area> element must have an ancestor <map> , but it need not be a direct parent. |
369
Implicit ARIA role | 372link when href attribute is present, otherwise no corresponding role |
373
Permitted ARIA roles | 376No role permitted |
377
DOM interface | 380HTMLAreaElement |
381
Specifications
Specification |
---|
HTML Standard # the-area-element |
Browser compatibility
BCD tables only load in the browser