Media & Embedded Content

HTML <area> Tag

The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

HTML Tag List Try Example Live

Previous:<applet>Complete HTML Tag List Next:<article>

Definition and Usage

The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

Standard Syntax:<area>...</area>

Interactive ExampleRunnable

HTML <area> Example

html

Try it Yourself

Live code demonstration for the <area> tag. Click "Try it Yourself" to edit and experiment in real time.

<div style="font-family: system-ui, sans-serif; padding: 16px; background: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0; color: #0f172a;">
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" 
    height="379">

<map name="workmap">
  <area shape="rect" 
    coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area 
    shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area 
    shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

    </map>
</div>

Attributes for <area>

11 Supported Attributes

Attribute	Values	Default	Description
alt	text	none	Specifies an alternate text for the area. Required if the href attribute is present
coords	coordinates	none	Specifies the coordinates of the area
download	filename	none	Specifies that the target will be downloaded when a user clicks on the hyperlink
href	URL	none	Specifies the hyperlink target for the area
hreflang	language_code	none	Specifies the language of the target URL
media	media query	none	Specifies what media/device the target URL is optimized for
referrerpolicy	no-referrerno-referrer-when-downgradeorigin origin-when-cross-originsame-originstrict-origin-when-cross-originunsafe-url	none	Specifies which referrer information to send with the link
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	none	Specifies the relationship between the current document and the target URL
shape	default rect circle poly	none	Specifies the shape of the area
target	_blank _parent _self _top framename	none	Specifies where to open the target URL
type	media_type	none	Specifies the media type of the target URL

Global Attributes

The <area> tag also supports the standard global attributes in HTML, including class, id, style, title, hidden, and data-*.

HTML Global Attributes Reference →

Event Attributes

The <area> tag supports event attributes in HTML, such as onclick, onmouseover, onfocus, and more.

HTML Event Attributes Reference →

Browser Compatibility

ChromeEdgeFirefoxSafariOpera

More Tags in Media & Embedded Content

View All 123Tags →

<applet>Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.<audio>The <audio> tag is used to embed sound content in a document, such as music or other audio streams.<canvas>The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).<embed>The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.<iframe>The <iframe> tag specifies an inline frame.<img>The <img> tag is used to embed an image in an HTML page.

Previous:<applet>Back to Tag List Next:<article>