Thẻ <area> định nghĩa vùng nhấp chuột trong image map (hình ảnh có nhiều vùng liên kết). Dùng bên trong <map>, liên kết với <img usemap="#ten-map">.
Các thuộc tính chính
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| alt | Text | Văn bản thay thế (bắt buộc cho accessibility) |
| coords | Tùy shape | Tọa độ: rect=x1,y1,x2,y2 | circle=x,y,r | poly=x1,y1,x2,y2... |
| shape | rect, circle, poly, default | Hình dạng vùng |
| href | URL | Đường dẫn khi click |
| target | _blank, _self, _parent, _top | Mở ở đâu |
| download | filename | Tải về khi click (HTML5) |
| hreflang | language_code | Ngôn ngữ trang đích |
| rel | nofollow, noopener... | Mối quan hệ link |
| media | media query | Thiết bị tối ưu |
| type | MIME type | Loại nội dung đích |
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Thẻ area HTML</title>
</head>
<body>
<img src="/images/usemap.gif" alt="usemap" border="0" usemap="#tutorials" />
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" />
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
<area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
</map>
</body>
</html>
Công cụ hỗ trợ
- Tọa độ: dùng công cụ online (image-map.net) hoặc devtools.
- Responsive: image map không tự co giãn — cần JS thư viện (ví dụ: image-map-resizer) hoặc SVG.