area是html5规定的void element，必须无结束标签且仅能嵌套在map内；coords需按shape严格匹配格式；含href时alt为必填项；坐标基于原始图像尺寸，不随css缩放自适应。
area 标签是 void element，不能写结束标签
HTML5 明确将 area 归类为 void element（空元素），它既不能有结束标签，也不能自闭合写成 <area> 或 <area>。写了就是语法错误——哪怕浏览器能容错渲染，DOM 解析器、Linter 工具、SSR 框架（如 Next.js）或旧版 Vue SFC 模板编译器都可能出问题。
常见错误现象包括：
-
<area href="#" coords="0,0,100,100" shape="rect">→ 浏览器忽略结束标签，但某些 HTML 预处理器会报错或截断后续属性 -
<area href="#" coords="0,0,100,100" shape="rect">→ 在纯 HTML5 文档中属于不规范写法，部分构建工具（如 Webpack + html-webpack-plugin）会警告或修正为单标签
area 必须嵌套在 map 标签内，且不能有子内容
area 不是通用行内元素，脱离 <map></map> 就彻底失效。它没有默认样式、不响应事件、不参与流式布局，只在图像映射上下文中起作用。
正确结构必须满足三个条件：
-
<map></map>标签要有name属性（如<map name="navmap"></map>） -
<img>标签通过usemap属性引用该name（注意加#前缀：usemap="#navmap"） - 所有
<area>必须是<map></map>的**直接子元素**，中间不能插入<div>、<code><p></p>等“中转”容器错误示例：
<map name="m"><div><area href="#" shape="rect" coords="0,0,100,100"></div></map>→ 该area不会被识别为映射区域。coords 和 shape 属性配合使用时容易坐标错位
area的交互行为完全依赖shape和coords的匹配。写错格式会导致点击区域偏移、无效或整个映射失效。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
三类常用
shape对应的coords格式必须严格对应：-
shape="rect"→coords="x1,y1,x2,y2"（左上角 + 右下角，不是宽高） -
shape="circle"→coords="x,y,r"（圆心 x、y + 半径 r，不是直径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（偶数个数值，每对为一个顶点）
常见坑：用设计稿标注的「宽度」直接当
x2，忘了x1起始值；或把 SVG 坐标系习惯带入，误以为 y 轴向下为负；又或复制坐标时多了一个逗号导致解析中断。alt 属性不是可选的，尤其当 href 存在时
area的alt属性在语义和可访问性层面是强要求。W3C 明确规定：若area含href，则alt必须存在且非空；否则屏幕阅读器无法告知用户该区域功能，也违反 WCAG 2.1 AA 级标准。不要写成：
<area href="/home" shape="rect" coords="0,0,100,100">（缺失alt）推荐写法：
<area href="/home" alt="首页入口" shape="rect" coords="0,0,100,100">注意：
alt值应描述功能而非外观（比如写“跳转到产品页”，而不是“右下角蓝色按钮”）；如果区域无跳转（仅 JS 交互），可用alt=""，但需额外加role="button"和tabindex="0"保证键盘可访问。真正容易被忽略的是：area 的坐标系绑定于原始图像尺寸，而非 CSS 缩放后的显示尺寸。图片用
width/height或 CSStransform: scale()调整大小后，area 区域不会自动适配——必须按原始像素重算coords，或改用 SVG 替代方案。 -
