HTML5最佳实践：能否在<figure>元素内使用<picture>元素？

按照HTML5规范与最佳实践，完全可以在<figure>元素内部使用<picture>元素，这是标准合规的写法，不属于非规范的hack用法

核心判断依据 #

• 从标签本身的规范定义来看：
  • <figure>的定位是标记可独立于正文流存在的独立内容单元，常见使用场景是为带说明文字的图表、照片、代码片段、插图等内容打语义标签，它的内容模型允许嵌套所有类型的流式内容
  • <picture>的定位是响应式图像适配容器，本身不直接渲染内容，核心作用是通过子级<source>标签，为内部嵌套的<img>元素匹配不同场景、不同分辨率的图像资源
• 从嵌套规则来看：
  <picture>本身就是合法的流式内容范畴，<figure>的规范文本里没有任何禁止嵌套<picture>的条目，不存在合规性层面的障碍。测试时观察到的图像正常显示的表现，是所有现代浏览器对该写法的标准支持结果，不是偶然兼容。
• 从语义匹配度来看：
  当你需要把带响应式适配能力的图像作为独立内容单元展示时，用<figure>包裹整个<picture>容器的逻辑是完全自洽的：整个响应式图像单元会被统一标记为独立的figure内容，后续如果需要搭配<figcaption>写图像说明，只需要把<figcaption>作为<figure>的直接子元素、和<picture>同级放置即可，语义标注的精度和直接用静态<img>的效果没有区别。

实操注意事项 #

• 不要因为用了<picture>容器就省略内部<img>标签的alt属性，<picture>本身不承担无障碍语义传递的作用，所有图像的无障碍说明都需要由内部的<img>来承载
• 不要把<figcaption>嵌套到<picture>内部，保持它和<picture>在<figure>下的同级结构，避免语义错位
• 不要为了套结构硬加<figure>：如果你的图像只是正文行文中的装饰性内容、不需要独立的语义标记，哪怕你用了复杂的<picture>适配逻辑，也不需要额外套一层<figure>

内容的提问来源于stack exchange，提问作者a_zero