area标签的rel属性仅在存在href时生效，必须与href共存才有语义价值；常见合法值包括nofollow、noopener、license、help等，非标准值无效；其作用限于SEO和可访问性提示，不影响链接跳转行为。
area 标签的 rel 属性只在有 href 时才生效
rel 属性本身不独立起作用，它必须和 href 同时存在才有语义价值。如果 area 只设了 alt 或 target 却没写 href，那 rel 会被浏览器忽略——连控制台警告都不会有。
常见误用是把 rel="nofollow" 当成“禁用链接”的开关，其实它只是向搜索引擎传递关系信号，点击仍会跳转。真正想禁用，得靠 JS preventDefault() 或移除 href。
-
rel="noopener"应与target="_blank"配合使用，防止新页面通过window.opener访问原页面（安全必需） -
rel="license"适合链接到本图的版权说明页，对无障碍阅读器有明确提示作用 -
rel="help"可用于指向某个区域的操作指南，屏幕阅读器可能读作“帮助链接”
rel 值必须来自 HTML5 官方白名单
浏览器只认标准值，写错或自定义如 rel="region"、rel="province" 不会报错，但也不会被解析——相当于没写。HTML5 规定的合法值包括：alternate、author、bookmark、help、license、next、nofollow、noreferrer、noopener、prefetch、prev、search、tag。
注意：rel="noreferrer" 和 rel="noopener" 效果不同：noreferrer 会屏蔽 Referer 头，noopener 则切断窗口引用关系。两者可同时写：rel="noreferrer noopener"。
立即学习“前端免费学习笔记（深入）”；
rel 对 SEO 和可访问性的影响很实际
搜索引擎会用 rel 判断链接意图。比如全国地图上每个省份的 area 都指向维基百科条目，统一加 rel="external"（虽非标准值，但部分爬虫识别）不如用标准 rel="nofollow" 配合 hreflang 更稳妥；而指向本站帮助页的区域，用 rel="help" 能提升辅助技术的理解准确率。
- 屏幕阅读器在朗读
area时，若含rel="author"，可能追加“作者链接”提示 - 写
rel="license"且href指向真实许可页，WCAG 2.1 会视作合规项之一 - 滥用
rel="nofollow"不影响页面跳转，但可能让搜索引擎降低该区域对应目标页的权重传递
rel 在响应式图像中容易被坐标失效掩盖
很多人调好了 rel，上线后发现“链接不起作用”，最后排查发现根本不是 rel 的问题，而是图片缩放导致 area 坐标错位——rel 还在，但热区根本点不到。这种情况下，rel 再规范也白搭。
验证顺序应该是：先确认 usemap 和 map name 匹配 → 再检查 area 是否嵌套在 map 内 → 最后看 computed styles 中 pointer-events 是否被父级 CSS 关闭。只有这些都通了，rel 才有机会起作用。
真正难处理的是多 DPI 屏幕下坐标漂移：你写的 coords="100,50,200,120" 在 2x 屏上实际匹配区域缩小一半，用户点中视觉位置，浏览器却判定未命中——此时 rel 完全无从介入。
