html 的 标签允许嵌套但不推荐，因其违背“自包含独立单元”的语义初衷；复杂图表标注应优先采用 svg 内嵌 /、aria 属性或多个同级 布局。

HTML 的 <figure></figure> 标签本身不禁止嵌套另一个 <figure></figure>，但直接嵌套通常不符合语义初衷，也不被推荐用于实现“复杂图表标注”。

语义核心：figure 表达独立内容单元

<figure></figure> 的设计目标是包裹一段**自包含、可独立引用**的内容（如图片、图表、代码块、表格等），并配以可选的 <figcaption></figcaption> 作为其整体标题或说明。它的语义是“一个完整的信息单元”，不是“标注容器”或“图层容器”。

• 单个图表 + 总体标题 → 用一层 <figure></figure> 即可
• 图表内部多个子区域需分别说明 → 应优先考虑 SVG 内嵌 <title></title>/<desc></desc>、ARIA 标签（aria-labelledby）、或 CSS+<span></span> 配合视觉/无障碍标注
• 若确需多个逻辑上并列的图表组件（如主图 + 插图 + 局部放大图）→ 可用多个同级 <figure></figure>，通过 CSS 布局组合，各自保持语义清晰

嵌套 figure 的实际问题

嵌套 <figure></figure> 容易模糊内容层级，导致：

• 屏幕阅读器可能将内层 <figcaption></figcaption> 解读为外层图表的补充说明，而非独立单元的标题
• 搜索引擎和文档处理器难以准确提取结构化信息
• CSS 样式继承与作用域变得不可控（如 figure figcaption 选择器会匹配所有层级）

更合适的复杂标注方案

针对带多区域标注的图表（如医学解剖图、电路原理图、数据可视化热力图），推荐以下组合方式：

• 使用 <svg></svg> 或 <canvas></canvas> 渲染图形，在其中用 <g></g> 分组 + <title></title> 和 <desc></desc> 提供机器可读标注
• 配合外部 <aside></aside> 或定义列表 <dl></dl> 列出关键区域说明，用 id 和 aria-describedby 关联对应图形元素
• 若必须用位图（如 PNG），可用 <div role="group"> 包裹图像与浮动标注框，并为每个标注区设置 <code>aria-label 或关联 <label for></label>

  例外：嵌套仅当存在真正嵌套的独立内容

  极少数情况下，嵌套可接受——前提是内层内容本身构成一个完整、可脱离上下文理解的 <figure></figure>：

  • 主图表是一张地理分布图，图中某区域插入一张独立的统计柱状图（含自己标题和来源）
  • 学术论文中，主图是实验装置示意图，图内嵌入一张放大的传感器特写照片（带独立 <figcaption></figcaption>）
  • 此时外层 <figure></figure> 描述整体，内层描述局部细节，二者都满足“自包含”原则