### [area 标签 rel 属性：热区链接的语义提示](https://www.huociguo.com/article/1881)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 配合 在单张图片上划分可点击热区。 属性为热区链接提供机器可读的语义提示，但存在明确的前置条件。 📌 生效前提…

![area 标签热区 rel 属性示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-7235911.jpeg)

`area` 配合 `map` 在单张图片上划分可点击热区。`rel` 属性为热区链接提供机器可读的语义提示，但存在明确的前置条件。

📌 生效前提

`rel` 仅在 `area` 带有 `href` 时才生效。无 `href` 的 `area` 只是占位区域，`rel` 无任何作用。二者必须共存。

📋 合法取值

-   `nofollow`：不向目标传递权重
-   `noopener`：新窗口打开时隔离 `window.opener`
-   `license`：指向许可协议
-   `help`：指向帮助文档
-   其余如 `next`、`bookmark` 亦可用

非标准值会被浏览器忽略，不会报错但无效果。

🔍 作用边界

`rel` 仅影响 SEO 与可访问性提示，不改变链接跳转行为，也不控制打开方式。新窗口打开仍靠 `target='_blank'`，安全隔离靠 `rel='noopener'`。

♿ 可访问性

每个 `area` 应带 `alt`，描述该热区的用途；缺失 `alt` 的 `area` 会被读屏软件跳过，破坏导航。

📌 典型结构

```
<img src='map.jpg' usemap='#m' alt='站点示意图'>
<map name='m'>
  <area href='/a' rel='nofollow' alt='分区A' coords='0,0,50,50'>
</map>
```

**Tags:** area 标签, nofollow, rel 属性, 图片热区, 链接语义

**Categories:** HTML5

---