HTML Element: Reference and Examples

You might see <area> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English

Defines a clickable region in an image map. Coordinates depend on the source image and need care when an image scales.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<img src="floor-plan.png" alt="School floor plan" usemap="#rooms" width="600" height="400">
<map name="rooms">
    <area shape="rect" coords="20,30,240,190" href="/library.html" alt="Library">
</map>

What Each Part Does

The area defines a hotspot link in an image map.
The img displays an image and uses alt for its text alternative.
The map groups clickable image regions.
src points to the asset the browser should load.
alt supplies replacement text for an informative image or empty text for a decorative one.
width reserves the image or embedded resource’s intended horizontal dimension.

A click within the defined rectangle navigates to the library page.

Try It Yourself

Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes

Omitting alt on linked areas or forgetting that scaling affects coordinates.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Defines a clickable region in an image map. Coordinates depend on the source image and need care when an image scales.
A click within the defined rectangle navigates to the library page.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.