和标签必须嵌套在中并配，因其仅声明媒体存在，无法表达语义上下文；单独使用会导致屏幕阅读器无法识别用途、搜索引擎难以判断权重、css难模块化控制，且违反html5语义化规范。
为什么不能只用 <video></video> 或 <audio></audio> 包裹内容
单独使用 <video></video> 或 <audio></audio> 标签，浏览器能播放，但语义结构是断裂的。它只告诉浏览器“这里有视频”，没说明“这是课程讲解视频”“这是配乐片段”“这是独立发布的播客单集”。屏幕阅读器无法识别上下文，搜索引擎难以判断内容权重，CSS 也难做模块化控制。
常见错误现象包括：多个音频并列时用一堆 <div> 套 <code><audio></audio>，导致辅助技术把它们读作“一段未命名的音频、另一段未命名的音频”；视频嵌在文章中却没标注用途，用户跳过标题后直接听到声音，体验突兀。
-
<video></video>和<audio></audio>是语义化起点，不是终点 - 必须配合
<figure></figure>明确其“独立可抽取”的属性 - 若该媒体有说明性文字（哪怕只是“第3节演示”），必须用
<figcaption></figcaption>而非<p></p>或<div> <h3> <code><figure></figure>和<figcaption></figcaption>怎么用才不翻车<figure></figure>不是“加个边框的容器”，它代表一个**自包含的内容单元**——可以脱离当前页面上下文被引用、重用或单独导出。比如一篇博客里嵌入的采访视频，就是典型的<figure></figure>场景。容易踩的坑：把整页视频列表塞进一个
<figure></figure>；或把带操作按钮的播放器 UI（如自定义进度条）写进<figcaption></figcaption>——后者只应承载说明性文本，UI 元素属于<video></video>自身或外层布局。- 每个独立音视频资源配一个
<figure></figure>，不要复用 -
<figcaption></figcaption>必须是<figure></figure>的**直接子元素**，且最多一个 - 支持空
<figcaption></figcaption>，但建议至少写简短用途，例如<figcaption>课堂实录：CSS Grid 布局演示</figcaption>
什么时候该用
<section></section>或<article></article>包裹多媒体<section></section>表示页面中一个**有主题的逻辑区块**，适合组织一组相关媒体，比如“本周更新视频合集”；<article></article>则强调内容**可独立分发**，比如单条播客、新闻视频、用户上传的 Vlog。混淆后果明显：用
<section></section>包一组播客，会暗示这些内容强关联、不可拆分；而用<article></article>包一个教学视频合集，则错误抬高了聚合内容的独立性，反而稀释单条内容的语义权重。- 单个课程视频 + 讲义文字 → 用
<article></article>（可作为 RSS 条目单独订阅） - 首页轮播的 3 个宣传视频 → 用
<section></section>（主题统一：“品牌故事”） - 评论区里的用户上传视频 → 每条都用
<article></article>，而非整个评论区套一个
响应式与可访问性必须同步考虑的细节
语义结构再清晰，如果视频溢出容器、字幕不可读、或键盘无法操作控件，就等于白搭。HTML5 多媒体的语义化不是纯标签游戏，它和 CSS、属性、辅助技术深度耦合。
典型疏漏：写了
<video controls></video>却没加aria-label，屏幕阅读器只报“视频，控件”；设置了poster图但没提供alt文本；用了<track kind="captions"></track>却没验证 WebVTT 文件格式是否合法。- CSS 中必加
video { max-width: 100%; height: auto; }，否则移动端横屏失效 -
<video></video>和<audio></audio>必须带controls属性，否则键盘 Tab 无法聚焦操作按钮 - 字幕文件路径写在
<track src="sub.vtt"></track>，但需确保服务器返回text/vttMIME 类型，否则 Safari 不加载
- 每个独立音视频资源配一个
