Struct Area 

pub struct Area;

The <area> element - defines a clickable area within an image map.

Purpose

The <area> element defines a hot-spot region on an image map and specifies the hyperlink target for that region. Must be used as a descendant of a <map> element. Supports rectangular, circular, and polygonal shapes.

Content Categories

• Flow Content
• Phrasing Content

Permitted Content Model

• None (void element)

Common Use Cases

• Creating clickable regions on geographic maps
• Interactive product diagrams with feature links
• Organizational charts with clickable positions
• Architectural plans with room navigation
• Educational diagrams with section links

Key Attributes

• shape: Shape of the area (“rect”, “circle”, “poly”, “default”)
• coords: Coordinates defining the shape
• href: URL the area links to
• alt: Alternative text for the area (required)
• target: Browsing context for navigation
• download: Download the resource instead of navigating
• ping: URLs to ping when the link is followed
• rel: Relationship between current document and target
• referrerpolicy: Referrer policy for navigation

Example

<!-- Rectangular areas -->
<map name="nav-map">
  <area shape="rect" coords="0,0,100,50" href="/home" alt="Home">
  <area shape="rect" coords="100,0,200,50" href="/about" alt="About">
  <area shape="rect" coords="200,0,300,50" href="/contact" alt="Contact">
</map>

<!-- Circular area -->
<map name="button-map">
  <area shape="circle" coords="150,150,75" href="/action" alt="Click to activate">
</map>

<!-- Polygon area (triangle) -->
<map name="complex-map">
  <area shape="poly" coords="100,50,150,150,50,150" href="/info" alt="Information">
</map>

<!-- Default area (fallback for unmapped regions) -->
<map name="diagram">
  <area shape="rect" coords="10,10,90,90" href="/section-1" alt="Section 1">
  <area shape="default" href="/overview" alt="General overview">
</map>

Accessibility

• Always provide meaningful alt text describing the area’s purpose
• Ensure alt text is concise and descriptive
• Make sure areas are large enough for touch interaction (minimum 44x44 pixels)
• Provide keyboard-accessible alternatives to image maps when possible
• Consider using semantic HTML links instead of image maps for better accessibility

WHATWG Specification

• 4.8.14 The area element

Trait Implementations

impl HtmlElement for Area

const TAG: &'static str = "area"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = true

Whether this is a void element (self-closing, no children allowed).

impl FlowContent for Area

impl PhrasingContent for Area