<area> defines a region in an image map. With href, it becomes a link and needs alt text describing the destination. It is void and must have a map ancestor.
Two linked regions
The left and right halves link to named sections. The ordinary links below give readers another way to navigate.
HTML and CSS
HTML
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22120%22%20viewBox%3D%220%200%20240%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23dbeafe%22%2F%3E%3Crect%20x%3D%22120%22%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23dcfce7%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2265%22%20font-size%3D%2220%22%3EHerbs%3C%2Ftext%3E%3Ctext%20x%3D%22140%22%20y%3D%2265%22%20font-size%3D%2220%22%3EFlowers%3C%2Ftext%3E%3C%2Fsvg%3E"
width="240"
height="120"
alt="Garden plan with herbs on the left and flowers on the right"
usemap="#garden"
/><map name="garden" id="garden"
><area shape="rect" coords="0,0,120,120" href="#herbs" alt="Herb bed" />
<area shape="rect" coords="120,0,240,120" href="#flowers" alt="Flower bed"
/></map>
<p>
Text links: <a href="#herbs">Herb bed</a> · <a href="#flowers">Flower bed</a>
</p>
<h2 id="herbs">Herb bed</h2>
<p>Basil and parsley.</p>
<h2 id="flowers">Flower bed</h2>
<p>Marigolds.</p>CSS
img {
display: block;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Shapes and coordinates
shape="rect" uses x1,y1,x2,y2; circle uses center-x,center-y,radius; poly uses a series of x/y pairs. default covers the image area without coordinates. “Image-based mapping” is not another shape value.
Coordinates use CSS pixels. Resizing the image with CSS may misalign fixed regions, so keep this exercise’s geometry fixed and plan a responsive alternative for a real interface. Overlapping regions and small targets require careful testing.
Links and accessibility
Area supports link attributes such as target and rel. With href, supply alt describing the choice, not just “left rectangle.” Without href, the area does not provide ordinary link behavior. Keep useful image alt and visible text alternatives.
Activate a region with the keyboard and verify its destination. Use a links instead when the content does not require clickable image geometry.
Sources and browser support
MDN: area describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.