Purpose and content model
Map defines named regions of an image, and area describes each region's shape and destination. An img connects to the map using usemap. This can be useful for a diagram with a small number of well-defined regions, but a responsive SVG or a list of ordinary links is often easier to maintain and operate.
Map contains flow content with area descendants. Area is void and is meaningful in the appropriate image-map context. Coordinates describe regions on the image; they do not automatically adapt to every CSS resizing strategy. Keep the corresponding textual navigation available when the diagram is unavailable.
Syntax and working example
<img src="/images/floor-plan.png" width="600" height="300" usemap="#rooms" alt="Library floor plan">
<map name="rooms">
<area shape="rect" coords="0,0,200,300" href="/children/" alt="Children’s library">
<area shape="rect" coords="200,0,600,300" href="/reading/" alt="Reading room">
</map>Supported attributes and behavior
Map uses name, which must be nonempty and match the image's usemap fragment. Area supports shape, coords, alt, href, target, download, ping, rel, and referrerpolicy. Shapes include rect, circle, poly, and default. Rect uses corner coordinates; circle uses center coordinates and radius; poly uses coordinate pairs. A linked area needs alternative text that names its destination rather than merely describing its color or position.
Another practical pattern
<nav aria-label="Rooms shown in the plan">
<a href="/children/">Children’s library</a>
<a href="/reading/">Reading room</a>
</nav>Accessibility and browser notes
Each destination must be available to keyboard and assistive-technology users. Generous target sizes matter on touchscreens. Avoid maps whose tiny regions require precise pointing. A text link list helps people who cannot use or understand the image and is also a useful fallback for loading failures.
Common mistakes
Do not assume coordinates scale correctly when CSS changes displayed dimensions. Do not use alt="blue section" when the area navigates to a named service. Overlapping regions and incorrect coordinate order can send users to surprising destinations.
Verify your implementation
Test every region at each supported viewport size using both a pointer and keyboard. Disable the image and confirm the destinations remain discoverable. Compare the hit areas with the actual scaled diagram, especially around region boundaries.
Standard status and sources
Standard; browser availability must be checked independently of specification status.