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