area是HTML5空元素，禁止自闭合且必须嵌套在map内作为直接子元素；usemap值须与map的name/id严格匹配；href和alt为必需属性，coords需基于原图尺寸。
area 是空元素，但不能随便写成自闭合
area 属于 HTML5 定义的 14 个 void elements（空元素）之一，语法上禁止有结束标签，也不允许自闭合写法（如 <area />）。它和 img、br 一样，只应写开始标签：<area shape="rect" coords="0,0,100,100" href="#" alt="首页">。浏览器虽会容错解析 <area />，但这是 XHTML 风格，在纯 HTML5 中无必要，且部分构建工具或 Linter（如 ESLint + html-validate）会报 warning。
area 必须嵌套在 map 内，且必须是直接子元素
area 不是通用交互标签，脱离 <map> 就彻底失效。常见错误包括：
- 把
area放在<div>或<section>里“中转”——浏览器直接忽略 - 放在
<head>或<body>顶层（未包裹在map中）——无效 - 被注释、
<script>或空白文本节点隔开——破坏父子关系，导致解析失败
正确结构只能是：<map name="nav"><area ...><area ...></map>，中间不能插入任何其他节点。
usemap="#name" 和
图片与热区地图的关联靠 usemap 属性，但它极易出错：
立即学习“前端免费学习笔记（深入）”；
-
usemap值必须以#开头，比如usemap="#main-nav" -
<map name="main-nav">的name必须和#后字符串完全一致：大小写、连字符、不可见空格都不能差 - 推荐同时设置
id和name，兼顾 HTML5 语义与旧浏览器兼容：<map id="main-nav" name="main-nav"> - 调试时右键图片 → “检查”，看是否能高亮对应
<map>；不能高亮，基本就是匹配失败
href 和 alt 是必需属性，coords 依赖原图尺寸
area 在 HTML5 中要求 href 和 alt 同时存在（alt 不能为空字符串，除非有正当无障碍理由）：
-
href缺失 → 热区无跳转行为，且部分屏幕阅读器可能跳过该区域 -
alt缺失 → 违反无障碍规范（WCAG），影响可访问性审核 -
coords值单位是像素，必须基于原始图片尺寸计算；缩放图片（如 CSSwidth: 100%）会导致热区偏移，需用响应式方案（如 JavaScript 动态重算或<picture>+srcset配合） -
shape和coords必须配套：比如shape="circle"对应coords="50,50,20"，写成shape="rect"却给三组坐标就会被忽略
真正容易被忽略的是：所有这些约束都不是“建议”，而是 HTML5 解析器的硬性规则。写错一个字符、少一个属性、多一层包裹，area 就不会出现在 DOM 中——不是样式不生效，是根本没被创建。
