Posts in current category

HTML5 <area> tag


May 03, 2021 13:10 HTML5


Table of contents


The HTML5 and lt;area tags can set the area of action in the desired image, and the user can jump to the appropriate page by clicking on the action area, so observe this example below:

Image map with clickable area:

<img src="https://7n.w3cschool.cn/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">

  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">

  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">

</map>

Try it out . . .

Browser support

HTML5 <area> tag HTML5 <area> tag HTML5 <area> tag HTML5 <area> tag HTML5 <area> tag

All major browsers support the label.


Label definition and instructions for use

The label defines the area inside the image map (image mapping refers to an image with a clickable area).

The elements are always nested inside the label.

Note: The usemap property in the label is associated with name in the element to create a relationship between the image and the map.


The difference between HTML 4.01 and HTML5

HTML5 provides some new properties and no longer supports some properties in HTML 4.01.


The difference between HTML and XHTML

In HTML, the label does not end the label.

In XHTML, the label must be turned off correctly.


Property

New: The new property in HTML5.

Property Value Describe
Alt text Alternative text for the specified area. If you use the href property, it is required.
coords coordinates Specifies the coordinates of the area.
Href Url The target URL for the specified area.
hreflang New language_code The language that specifies the target URL.
media New media query Specify what media/device is optimized for the target URL. Default: all.
nohref value HTML5 is not supported. Specify areas where there are no relevant links.
rel New alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Describes the relationship between the current document and the target URL.
shape default
rect
circle
poly
Specifies the shape of the area.
target _blank
_parent
_self
_top
framename
Specify where to open the destination URL.
type New MIME_type Specifies the type of MIME for the target URL.
Note: MIME - Multipurpose Internet Extension Mails.

Global properties

The label supports the global properties of HTML.


The event property

The tag supports the event properties of HTML.


Related articles

HTML DOM Reference Manual: Area Object