area是HTML5规定的void element，必须无结束标签且仅能嵌套在map内；coords需按shape严格匹配格式；含href时alt为必填项；坐标基于原始图像尺寸，不随CSS缩放自适应。
area 标签是 void element，不能写结束标签
HTML5 明确将 area 归类为 void element（空元素），它既不能有结束标签，也不能自闭合写成 <area /> 或 <area></area>。写了就是语法错误——哪怕浏览器能容错渲染，DOM 解析器、Linter 工具、SSR 框架（如 Next.js）或旧版 Vue SFC 模板编译器都可能出问题。
常见错误现象包括：
-
<area href="#" coords="0,0,100,100" shape="rect"></area>→ 浏览器忽略结束标签，但某些 HTML 预处理器会报错或截断后续属性 -
<area href="#" coords="0,0,100,100" shape="rect" />→ 在纯 HTML5 文档中属于不规范写法，部分构建工具（如 Webpack + html-webpack-plugin）会警告或修正为单标签
area 必须嵌套在 map 标签内，且不能有子内容
area 不是通用行内元素，脱离 <map> 就彻底失效。它没有默认样式、不响应事件、不参与流式布局，只在图像映射上下文中起作用。
正确结构必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
-
<map>标签要有name属性（如<map name="navmap">） -
<img>标签通过usemap属性引用该name（注意加#前缀：usemap="#navmap"） - 所有
<area>必须是<map>的**直接子元素**，中间不能插入<div>、<p>等“中转”容器
错误示例：<map name="m"><div><area href="#" shape="rect" coords="0,0,100,100"></div></map> → 该 area 不会被识别为映射区域。
coords 和 shape 属性配合使用时容易坐标错位
area 的交互行为完全依赖 shape 和 coords 的匹配。写错格式会导致点击区域偏移、无效或整个映射失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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 或 CSS transform: scale() 调整大小后，area 区域不会自动适配——必须按原始像素重算 coords，或改用 SVG 替代方案。
