<figure> 用于包裹图像、图表、代码块等可独立引用的语义化媒体单元，必须配非空 <figcaption> 说明其内容与上下文关系，不可用于装饰性图片或替代音视频原生语义。
用 <figure> 包裹图像、图表、代码块等独立媒体单元
单独一张图、一段截图、一个数据图表，或者一段嵌入的<video>，如果它在逻辑上是一个可被引用、说明、编号的“完整内容单元”，就该用 <figure>。它不是装饰，而是内容的一部分——比如博客里的一张实验结果图，或文档中的一段示例代码。
常见错误是直接把 <img> 扔进 <p> 或 <div> 里，既没上下文，也没结构归属。屏幕阅读器无法识别这是“一张有说明的图”，搜索引擎也难判断其语义权重。
-
<figure>内可嵌套<img>、<video>、<pre>、甚至<table>，只要它们构成一个自洽单元 - 必须配
<figcaption>，且它应作为<figure>的第一个或最后一个子元素（推荐放最后） - 不要用
<figure>包裹纯装饰图（如背景分割线），那该用<img alt="">+ CSS
示例：
<figure> <img src="chart.png" alt="2025年用户留存率趋势：Q1至Q4逐季上升"> <figcaption>图1：2025年各季度用户留存率变化（数据来源：内部BI系统）</figcaption> </figure>
<figcaption> 必须存在，且不能空着或仅含标点
<figcaption> 不是可选项，也不是“锦上添花”。W3C 明确要求：当 <figure> 包含媒体时，若缺失 <figcaption>，语义即不完整；即使内容简短，也要写一句有效说明。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑包括：<figcaption>.</figcaption>、<figcaption> </figcaption>、或干脆省略。这些都会让辅助技术跳过整块 <figure>，或将其降级为普通图像处理。
- 文字需描述“是什么+为什么相关”，例如
<figcaption>Vue 3 的响应式原理示意：effect 与 track 依赖收集流程</figcaption> - 避免重复
<img>的alt值，<figcaption>是补充性解释，不是替代 - 支持 HTML 内联元素，如
<strong>、<a>，但别塞段落或列表
音视频标签自身已具语义，但需配合 <track> 和 aria-label
<video> 和 <audio> 是原生语义化标签，不需要再套 <figure> ——除非你把它当作一篇“可引用的媒体作品”，比如播客单集、教学录像片段。多数场景下，直接使用即可。
真正常被忽略的是可访问性补全：没有字幕的 <video> 对听障用户无效，没有 aria-label 的 <audio> 在语音导航中无法被识别功能。
- 必须用
<track kind="subtitles">提供字幕，且srclang和label不可缺 - 若音频无视觉控件（如仅一个播放按钮图标），务必加
aria-label="播放《前端性能优化实践》播客" - 避免仅靠
title属性传递关键信息，它不被所有读屏器稳定支持
避免把 <article> 或 <section> 当作媒体容器滥用
有人习惯把整个轮播图区域包进 <article>，或给每张 banner 加 <section>，这是典型误用。<article> 表示“可独立分发、复用的内容”，比如一篇博客、一条新闻、一个用户评论；<section> 表示“有主题的页面区块”，比如“产品特性”“客户评价”。
轮播图、封面图、广告位本身不是内容主体，而是呈现手段。强行套语义标签反而干扰解析逻辑。
- 轮播容器用
<div role="region" aria-live="polite">更准确（配合 ARIA） - 单张 banner 图像仍走
<figure>+<figcaption>路线，而非<article> - 若某张图确实是一篇独立报道（如“台风实时卫星云图”），那才适用
<article>，并配完整元数据
最常被忽略的一点：语义标签的价值不在“用了没”，而在“用得准”。一个错位的 <article> 比不用更糟——它向机器传递了错误的结构信号，后续的 SEO、无障碍、自动化摘要都可能因此偏航。
