HTML area rel 属性（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，图像映射（Image Map）是一种常见的交互设计手段，允许用户通过点击图像的特定区域触发链接或事件。而 area 标签作为图像映射的核心元素，其 rel 属性则能进一步细化这些区域链接的行为与关系。对于编程初学者和中级开发者而言，理解 area rel 属性的功能和应用场景，不仅能提升网页的交互体验，还能优化 SEO 和用户导航逻辑。本文将通过循序渐进的方式，结合代码示例和实际案例，深入解析这一属性的使用方法与技巧。

图像映射与 area 标签的基础概念

图像映射是什么？

图像映射（Image Map）是 HTML 中一种通过单张图像划分多个可点击区域的技术。它允许开发者将一张图片分割为多个“热点”（Hotspots），每个热点对应不同的链接或功能。例如，一张世界地图的图像映射可以将各个国家区域设置为独立的链接，点击后跳转至对应国家的详细介绍页面。

area 标签的作用

<area> 标签是 <map> 标签的子元素，用于定义图像映射中的单个区域。其核心属性包括：

• shape：指定区域形状（如矩形、圆形、多边形）。
• coords：定义区域的坐标位置。
• href：指定点击区域后跳转的目标 URL。
• alt：为区域提供替代文本，提升可访问性。

而 rel 属性则是 <area> 标签中一个容易被忽视但功能强大的扩展属性，它能够明确指定该区域链接与当前页面的关系类型。

rel 属性详解：定义链接与页面的关系

rel 属性的通用作用

rel 属性在 HTML 中广泛用于 <a> 和 <area> 标签，其全称为 rel ative，即“关系”。它通过预定义的值（如 nofollow、external 等），告诉浏览器或搜索引擎该链接与当前文档的关联方式。例如：

<a href="https://example.com" rel="nofollow">外部链接</a>  

此示例中的 nofollow 表示“不跟踪此链接”，搜索引擎会忽略该链接的权重传递。

area 标签中的 rel 属性

在 <area> 标签中，rel 属性同样遵循这一逻辑，但需结合图像映射的特殊场景使用。其核心作用包括：

1. 控制 SEO 权重：通过 nofollow 或 external 等值，防止搜索引擎误判链接重要性。
2. 明确导航意图：例如，使用 external 标识外部链接，提示用户新窗口打开。
3. 增强可访问性：部分屏幕阅读器会根据 rel 值调整语音提示。

常用 rel 属性值及含义

实战案例：构建一个带 rel 属性的图像映射

案例场景

假设我们为一个旅游网站设计一张“世界七大奇迹”地图，点击不同区域跳转至对应景点的详细介绍页。同时，需通过 rel 属性控制外部链接的权重和安全性。

HTML 代码示例

<img  
  src="wonders-map.png"  
  alt="世界七大奇迹地图"  
  usemap="#wonders-map"  
  width="800" height="600"  
>  

<map name="wonders-map">  
  <!-- 金字塔（内部链接） -->  
  <area  
    shape="rect"  
    coords="100,100,300,200"  
    href="/pyramids"  
    alt="吉萨金字塔"  
    rel="bookmark"  <!-- 标识为书签，提升导航体验 -->  
  >  

  <!-- 马丘比丘（外部链接） -->  
  <area  
    shape="circle"  
    coords="500,400,50"  
    href="https://machupicchu.com"  
    alt="马丘比丘"  
    rel="external nofollow noopener noreferrer"  <!-- 多值组合，强化安全与 SEO -->  
  >  

  <!-- 秦始皇陵（新窗口打开） -->  
  <area  
    shape="poly"  
    coords="600,300,650,250,700,300"  
    href="/terracotta-army"  
    alt="秦始皇陵兵马俑"  
    rel="noreferrer"  <!-- 隐藏当前页面的 Referer 信息 -->  
  >  
</map>  

关键点解析

1. rel="bookmark"：为内部链接添加书签标记，帮助用户快速定位重要内容。
2. rel="external nofollow noopener noreferrer"：
   • external：提示浏览器在新窗口打开外部链接。
   • nofollow：阻止搜索引擎权重传递。
   • noopener 和 noreferrer：双重防护，防止跨站脚本攻击（XSS）和隐私泄露。
3. 多值组合：rel 属性支持多个值，用空格分隔，实现多重功能叠加。

rel 属性的进阶技巧与注意事项

技巧 1：结合 target 属性优化用户体验

当链接指向外部网站时，建议同时设置 target="_blank" 和 rel="external"：

<area  
  href="https://external-site.com"  
  rel="external nofollow"  
  target="_blank"  
>  

此组合能明确提示用户新页面将打开，同时告知搜索引擎不传递权重。

技巧 2：动态生成 rel 值的场景

在 JavaScript 动态创建 <area> 标签时，可通过条件判断设置 rel 属性：

const area = document.createElement("area");  
area.shape = "rect";  
area.coords = "100,100,300,200";  
area.href = "https://dynamic-link.com";  

// 根据链接类型设置 rel  
if (isExternalLink) {  
  area.rel = "external nofollow noopener";  
}  

注意事项

1. 浏览器兼容性：部分旧版浏览器可能不完全支持 rel 属性的某些值（如 noopener），建议通过 Can I Use 等工具验证。
2. SEO 影响：过度使用 nofollow 可能导致重要链接被搜索引擎忽略，需合理评估链接价值。
3. 可访问性：为每个 <area> 添加 alt 文本，确保屏幕阅读器用户能理解区域功能。

rel 属性与其他 HTML 属性的协同作用

与 href 的配合

rel 属性必须与 href 属性共同使用，否则其值将被忽略。例如：

<area shape="rect" coords="..." rel="nofollow">  <!-- 无效，缺少 href -->  
<area shape="rect" coords="..." href="..." rel="nofollow">  <!-- 有效 -->  

与 download 的结合

若需强制下载文件，可结合 download 属性：

<area  
  shape="circle"  
  coords="..."  
  href="/report.pdf"  
  rel="nofollow"  
  download="annual-report"  
>  

此示例中，rel="nofollow" 阻止 SEO 权重传递，而 download 触发文件下载。

结论

area rel 属性是图像映射功能中一个易被低估但至关重要的工具。通过合理设置 rel 值，开发者不仅能细化链接的行为逻辑，还能优化 SEO 效果、提升安全性，并改善用户体验。无论是标注内部书签、控制外部链接权重，还是防范潜在安全风险，这一属性都能提供灵活且高效的支持。

对于初学者，建议从基础的 nofollow 和 external 开始实践，逐步探索更复杂的组合场景；中级开发者则可结合动态逻辑和安全防护策略，进一步挖掘其潜力。掌握 area rel 属性，将成为你构建高质量交互式网页的重要一环。