area标签必须嵌套在map内且为直接子元素，usemap值须与map的name属性逐字节一致，area不可自闭合，coords基于原图尺寸计算。

area 标签不能独立存在，必须嵌套在 map 内，且必须是其**直接子元素**；map 本身不渲染，只靠 img 的 usemap 属性关联生效。写错嵌套层级或漏掉关键属性，热区就完全不可点。

map 和 area 的嵌套结构必须严格满足三要素

浏览器不会报错，但热区失效时大概率是这三点没对齐：

• img 的 usemap 属性值必须以 # 开头，且后面字符串要和 map 的 name 属性**逐字节一致**（大小写、连字符、空格都不能差）
• area 必须写在 map 开始标签和结束标签之间，中间**不能插入任何其他标签**（比如 div、p、注释甚至换行符都不是问题，但包裹容器就是硬性错误）
• map 标签必须有 name 属性；area 若含 href，则 alt 为必填项（无障碍和验证要求）

area 标签不能自闭合，也不能写结束标签

area 是 HTML5 规定的 void element（空元素），语法上**不允许**写成 <area> 或 <area>。虽然部分浏览器能容错渲染，但以下场景会出问题：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• Linter 工具（如 ESLint + html-validate）直接报错
• SSR 框架（Next.js、Nuxt）在服务端解析时抛异常或截断后续属性
• Vue 单文件组件中，<area> 可能被模板编译器误判为未闭合标签
• HTML 预处理器（如 Pug/Jade）会拒绝编译带结束标签的 area

coords 坐标永远基于原始图像尺寸计算

你用 CSS 把一张 1200×800 的图缩放到 300px 宽显示，coords="0,0,100,100" 依然指向原图左上角那 100×100 像素区域——现在它在屏幕上只占约 25×25px，点不准是必然的。解决思路只有两个：

立即学习“前端免费学习笔记（深入）”；

• 用 JavaScript 动态缩放坐标（监听 resize、读取 img.naturalWidth 和 getBoundingClientRect()）
• 改用 SVG 替代：SVG 热区天然响应式，<rect></rect>、<circle></circle> 等元素支持百分比坐标和 viewBox
• 若坚持用 area，务必确保图片加载完成后再读取 naturalWidth/naturalHeight，否则可能拿到 0

最常被忽略的一点：没有 alt 的 area 在部分屏幕阅读器中会被跳过，且 W3C 验证器会警告；而坐标算错时，Chrome DevTools 的 Elements 面板里根本不会高亮对应 area——它压根没被识别为有效热区。