HTML <area> Tag
Description
The <area>
HTML element defines the active areas of an image, which are links. A drawing with active regions attached to it is called collectively an image map. Such a map in appearance is no different from a conventional image, but it can be divided into invisible zones of various shapes, where each of the areas serves as a link. The <area>
element sets the shape of the area, its size, sets the address of the document to which reference should be made. The <area>
is always located in the <map>
container, which associates the coordinates of the regions with the image.
Properties
- Permitted Parents
- Any element that accepts phrasing content. The
<area>
element must have an ancestor<map>
, but it need not be a direct parent. - Content
- None. It is an empty element.
- Start/End Tags
- Start tag: required, End tag: forbidden
Example
<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />
<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
</map>
<script>
function clicked_on ( clicked_shape )
{
alert ( "You clicked on the " + clicked_shape );
}
</script>
Attributes
Attribute | Definition |
---|---|
alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. |
coords | Specifies the coordinates of an area. |
href | Specifies the hyperlink target for the area. |
hreflang | Specifies the language of the target URL. |
media | Specifies what media/device the target URL is optimized for. |
rel |
Specifies the relationship between the current document and the target URL.
|
shape |
Specifies the shape of an area.
|
target |
Specifies where to open the target URL.
|
type | Specifies the MIME type of the target URL. |
Global Attributes
The <area>
tag also supports the Global Attributes in HTML5
Event Attributes
The <area>
tag also supports the Event Attributes in HTML5
Browser Support
Desktop | |||||
Yes | Yes | Yes | 1 | Yes | Yes |
Tablets / Mobile | |||||
![]() |
|||||
Yes | Yes | 4 | Yes | Yes | Yes |
Last updated by CSSPortal on: 6th December 2019
HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr